手機網站的注意事項

時間 2020-02-13

原文原文鏈接

一.web app
手機網站的注意事項:
1.安卓瀏覽器看背景圖片,有些設備會模糊-->
devicePixeRatio手機分辨率太小形成,解決方法使用2倍背景圖代替img標籤.
2.圖片加載很慢-->
手機開發通常用canvas方法加載
3.手機端不考慮IE兼容問題,使用zeptojs,內置Touch events方法.
4.防止手機中網頁放大縮小-->
設置meta中的viewport(視口)
5.apple-mobile-web-app-capable
設置Web應用是否以全屏模式運行-->
<meta name="apple-mobile-web-app-capable" content="yes">
6.format-detection啓動或禁用自動識別頁面中的電話號碼-->
<meta name="format-detection" content="telephone=no">
7.html5調用安卓或者ios的撥號功能-->
撥電話直接以下< a href=" ">400-810-6999轉1034</ a>
撥手機直接以下< a href="tel:15677776767"></ a>
8.html5GPS定位功能à
主要用的是getCurrentPosition，該方法封裝在 navigator.geolocation 屬性裏，是 navigator.geolocation 對象的方法。
9.上下拉動滾動條時卡頓,慢:
body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}Android3+和iOS5+支持CSS3的新屬性爲overflow-scrolling
10.禁止複製選中文本
Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
}解決移動設備可選中頁面文本(視產品須要而定)
11.長時間按住頁面出現閃退
element {-webkit-touch-callout: none;}
12.iPhone及ipad下輸入框默認內陰影
Element{ -webkit-appearance: none; }
13.ios和Android下觸摸元素時出現半透明灰色遮罩
Element{-webkit-tap-highlight-color:rgba(255,255,255,0)}
設置alpha值爲0就能夠去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
14.active兼容處理即僞類:active失效
方法一:body添加ontouchstart--><body ontouchstart="">
方法二:js給 document 綁定 touchstart 或 touchend 事件
15.動畫定義3d啓用硬件加速
Element {
    -webkit-transform:translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0);
}注意:3d變形會消耗更多的內存和功耗
16.Retina屏的1px邊框
Element{border-width: thin;}
17.webkit mask 兼容處理
某些低端手機不支持css3 mask，能夠選擇性的降級處理。
好比能夠使用js判斷來引用不一樣class：
if( 'WebkitMask' in document.documentElement.style){
    alert('支持mask');
} else {
    alert('不支持mask');
}
1八、旋轉屏幕時，字體大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:100%;
}
1九、transition閃屏
/設置內嵌的元素在 3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d;
/ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 /
-webkit-backface-visibility:hidden;
20、圓角bug
某些Android手機圓角失效
background-clip: padding-box;
2一、頂部狀態欄背景色
<meta name="apple-mobile-web-app-status-bar-style" content="blacss

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。