1. Return to the previous page
The first time you used the mobile phone end to return to the previous page, you only wrote window.history.go(-1).
But it only works on the phone. Apple phone compatibility needs to add return false after the jump code.
After the jump, refresh the page and add self.location.reload(); this sentence.
window.history.go(-1); //Return to the previous page return false; //Compatible ios system self.location.reload(); //ios refresh page
2, WeChat browser prohibit page pull-down
The addEventListener() method adds an event handle to the specified element.
The preventDefault() method prevents elements from defaulting.
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); document.oncontextmenu = function(e) { //Or return false; e.preventDefault(); };
3. Media Inquiry
Direction: horizontal/vertical screen
orientation: portrait | landscape
portrait: Specifies that the visible area of the page in the output device is greater than or equal to the width
Landscape: Except for portrait values, they are landscape
@media screen and (max-width: 320px){ } //width @media only screen and (orientation: landscape) { } //Judgment of horizontal and vertical screen
4. Upload Picture Display
Display the uploaded pictures, which may be used in background management system.
<input type="file" name="image" onchange="show(this)"> <img id="img" src="" style="display: none;"/> // JS code function show(file){ var reader = new FileReader(); // Instantiate a FileReader object for reading files var img = document.getElementById('img'); // Get the label to display the picture //Read data from File objects reader.onload = function(evt){ img.style.display = 'block'; img.src = evt.target.result; } reader.readAsDataURL(file.files[0]); }
5. Events of long press
$(".btn").on({ touchstart: function(e) { // Long Press Event Trigger timeOutEvent = setTimeout(function() { timeOutEvent = 0; location.href='www.baidu.com'; //Jump link }, 400); }, touchmove: function() { clearTimeout(timeOutEvent); timeOutEvent = 0; }, touchend: function() { clearTimeout(timeOutEvent); if (timeOutEvent != 0) { alert('Long press open'); } return false; } })
6. Adjust style according to page height
var height = $(window).height(); if(height>625){ $('.box').css("margin-top", "10px"); }
7. Clear the Fork Number in the Browser Search Box
.search::-webkit-search-cancel-button{display: none;} .search[type=search]::-ms-clear{display: none;}
8, judge ios and
When making H5 pages, there are some differences between ios and display, so sometimes I will do different adaptions and write different styles according to different mobile phone systems.
var u = navigator.userAgent, app = navigator.appVersion; //android var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //ios var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isAndroid){ } else{ }