資訊專欄INFORMATION COLUMN
摘要：返回上一頁第一次在手機(jī)端用到返回上一頁的時候，只寫了這一句。但是只在安卓手機(jī)有效果，兼容蘋果手機(jī)需要在跳轉(zhuǎn)代碼后加上這句。方法阻止元素發(fā)生默認(rèn)的行為。
1、返回上一頁
第一次在手機(jī)端用到返回上一頁的時候，只寫了window.history.go(-1)；這一句。
但是只在安卓手機(jī)有效果，兼容蘋果手機(jī)需要在跳轉(zhuǎn)代碼后加上return false；這句。
跳轉(zhuǎn)后刷新頁面加上self.location.reload()；這句。
window.history.go(-1); //返回上一頁 return false; //兼容ios系統(tǒng) self.location.reload(); //ios刷新頁面
2、微信瀏覽器禁止頁面下拉
addEventListener()方法向指定元素添加事件句柄。
preventDefault()方法阻止元素發(fā)生默認(rèn)的行為。
document.addEventListener("touchmove", function(e) {
e.preventDefault();
}, {
passive: false
});
document.oncontextmenu = function(e) { //或者return false;
e.preventDefault();
};
3、媒體查詢
方向：橫屏/豎屏
orientation：portrait | landscape
portrait：指定輸出設(shè)備中的頁面可見區(qū)域高度大于或等于寬度
landscape： 除portrait值情況外，都是landscape
@media screen and (max-width: 320px){ } //寬度
@media only screen and (orientation: landscape) { } //判斷橫豎屏
4、上傳圖片顯示
將上傳的圖片顯示出來，做后臺管理系統(tǒng)的時候有可能會用到。
// JS代碼
function show(file){
var reader = new FileReader(); // 實例化一個FileReader對象，用于讀取文件
var img = document.getElementById("img"); // 獲取要顯示圖片的標(biāo)簽
//讀取File對象的數(shù)據(jù)
reader.onload = function(evt){
img.style.display = "block";
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
5、長按事件
$(".btn").on({
touchstart: function(e) {
// 長按事件觸發(fā)
timeOutEvent = setTimeout(function() {
timeOutEvent = 0;
location.href="www.baidu.com"; //跳轉(zhuǎn)鏈接
}, 400);
},
touchmove: function() {
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function() {
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) {
alert("長按開啟");
}
return false;
}
})
6、根據(jù)頁面高度調(diào)整樣式
var height = $(window).height();
if(height>625){
$(".box").css("margin-top", "10px");
}
7、清除在瀏覽器上搜索框中的叉號
.search::-webkit-search-cancel-button{display: none;}
.search[type=search]::-ms-clear{display: none;}
8、判斷安卓和ios
做H5頁面時，安卓和ios在顯示上還是有些區(qū)別，所以有的時候我會根據(jù)不同的手機(jī)系統(tǒng)去做適配，寫不同的樣式。
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{ }
公眾號原文鏈接
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106722.html
摘要：返回上一頁第一次在手機(jī)端用到返回上一頁的時候，只寫了這一句。但是只在安卓手機(jī)有效果，兼容蘋果手機(jī)需要在跳轉(zhuǎn)代碼后加上這句。方法阻止元素發(fā)生默認(rèn)的行為。 1、返回上一頁第一次在手機(jī)端用到返回上一頁的時候，只寫了window.history.go(-1)；這一句。但是只在安卓手機(jī)有效果，兼容蘋果手機(jī)需要在跳轉(zhuǎn)代碼后加上return false；這句。跳轉(zhuǎn)后刷新頁面加上self.locati...
閱讀 2242·2021-09-23 11:52
閱讀 1910·2021-09-02 15:41
閱讀 3028·2019-08-30 10:47
閱讀 1993·2019-08-29 17:14
閱讀 2348·2019-08-29 16:16
閱讀 3198·2019-08-28 18:29
閱讀 3429·2019-08-26 13:30
閱讀 2617·2019-08-26 10:49
