移動端相容和適配問題
阿新 • • 發佈：2018-11-04
-
安卓瀏覽器看背景圖片，有些裝置會模糊
- 解決方案:將背景圖片放大為div的2X倍(一般為兩倍),背景圖儘量高清且大於目標div的尺寸
/*原背景(div寬高都為100px)*/ .div{ background:url(../../XX.png) no-repeat center center; background-size: 100px 100px;display:inline-block; } /*相容後的背景*/ .div{ background:url(../../XX.png) no-repeat center center; background-size: 200px 200px;display:inline-block; } /*或者*/ .div{ background:url(../../XX.png) no-repeat center center; background-size: contain; }
-
圖片載入很慢
- 解決方案:1.使用Canvas繪製圖片進行預載入;
2.使用Lazy Load外掛
/*方案1*/ /* 獲取圖片的base64碼 * @param {obj}img圖片dom物件 * */ function getBase64Image(img) { let canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); //繪製相同圖片 return canvas.toDataURL("image/png"); //轉換成base64資料 } <!--需要預載入的圖片--> <save-img-base64> <img src="../../assets/1.png"/> <img src="../../assets/2.png"/> <img src="../../assets/3.png"/> </save-img-base64> /*方案2*/ /*載入Lazy Load外掛,其為jQuery的一個庫因此也要載入jQuery外掛*/ <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> $("img.lazy").lazyload(threshold : 200); /*當用戶禁用JavaScript時預設顯示的影象 <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript> <script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>
-
3.手機中網頁的放大和縮小
- 解決方案:禁用使用者的縮放功能
<meta name="viewport" content="user-scalable=0"/>-
4.格式的自動識別
- 解決方案:禁用自動識別頁面中的格式
<meta name="format-detection" content="telephone=no">-
5.移動端Gps定位
- 解決方啊:引用百度地圖的api
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0; font-family: "微軟雅黑"; font-size: 14px; } #allmap { width: 100%; height: 500px; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script> <title>獲取當前所在地址，不顯示地圖</title> </head> <body> <!--<div id="allmap"></div>--> <!--不顯示地圖--> <div id="allmap" style="display:none"></div> </body> </html> <script type="text/javascript"> $(function () { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, locationError); } else { alert("你的瀏覽器不支援 GeoLocation."); } }); //定位成功時，執行的函式 function showPosition(position) { // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398, 39.897445); map.centerAndZoom(point, 12); var geoc = new BMap.Geocoder(); translateCallback = function (res) { alert(res.points.length); $.each(res.points, function (index, val) { var point = val; alert(point.lng + "," + point.lat); var marker = new BMap.Marker(point); map.addOverlay(marker); map.setCenter(point); geoc.getLocation(point, function (rs) { var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); //var infoWindow = new BMap.InfoWindow(sContent); //map.openInfoWindow(infoWindow, point); }); }); }//(point); var convertor = new BMap.Convertor(); var points = new Array(); points.push(point); //translate(points: Array<BMap.Point>, from: number, to: number, callback: function)//callback返回是一個物件Object，TranslateResults型別 //TranslateResults：status,points //參照：JavaScript API-服務類 Convertor TranslateResults http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b49 //其中狀態碼可參照：WEB服務API-座標轉換API http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition convertor.translate(points, 1, 5, translateCallback); } // 定位失敗時，執行的函式 function locationError(error) { switch (error.code) { case error.PERMISSION_DENIED: alert("User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: alert("Location information is unavailable."); break; case error.TIMEOUT: alert("The request to get user location timed out."); break; case error.UNKNOWN_ERROR: alert("An unknown error occurred."); break; } } </script>
-
6.上下拉動滾動條時卡頓、慢
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling: touch;
}-
7.是否允許使用者複製文字
Element {
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}-
8.長時間按住頁面出現閃退
element {
-webkit-touch-callout:none;
}-
9.iphone及ipad下輸入框預設內陰影
Element{
-webkit-appearance:none;
}-
10、ios和android下觸控元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}-
11、active相容處理 即 偽類 :active 失效
- 解決方案:js給 document 繫結 touchstart 或 touchend 事件
document.addEventListener('touchstart',function(){},false);-
12.webkit mask 相容處理
if('WebkitMask'indocument.documentElement.style){
/*支援*/
}
else{
/*不支援*/
}-
13.旋轉螢幕時，字型大小自動調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
-webkit-text-size-adjust:100%;
}-
14.transition閃屏
/設定內嵌的元素在3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d;
/ 設定進行轉換的元素的背面在面對使用者時是否可見：隱藏 /
-webkit-backface-visibility:hidden;
-
15.圓角bug
background-clip: padding-box;-
16.h5網站input 設定為type=number的問題
- 解決方案:解決max-length和部分手機樣式問題
functioncheckTextLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:none;
margin:0;
}
-
- IOS移動端click事件300ms的延遲響應
-解決方案:使用fastclick
- IOS移動端click事件300ms的延遲響應
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
-
18.點選穿透問題
- 解決方案:使用touch替代click,避免混用.
-
19.h5底部輸入框被鍵盤遮擋問題
<script src="jquery.js" type="text/javascript"></script>
var oHeight = $(document).height(); //瀏覽器當前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});-
20.自動適應螢幕寬度
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">-
21.在pc端的基礎上手動調節移動端的佈局
/*max-width:最大寬度以下的佈局為..min-width:最小寬度以上的佈局為: 具有覆蓋效果*/
@media (max-width: 720px)
html {
font-size: 62.5%;
}參考文件
https://www.cnblogs.com/mazhaokeng/p/8461260.html
https://blog.csdn.net/dengboblog/article/details/53156570
https://blog.csdn.net/diqi77/article/details/54692920
https://www.cnblogs.com/zr123/p/8178740.html