移動端web筆記整理

時間 2019-12-01

標籤移動 web 筆記整理欄目無線简体版

原文原文鏈接

<!DOCTYPE html>
<html>
head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>標題</title>
</head>

<body>
內容
</body>
</html>

問題總結

移動端字體定義jquery

場景描述: 手機系統ios,android等是不支持微軟雅黑字體android

解決方案一:@font-face定義爲微軟雅黑字體並存放到web服務器上ios

@font-face {
        font-family: 'MicrosoftYaHei';
        src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
        src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
        url('MicrosoftYaHei.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
        }
        <!-- 缺點：消耗用戶的流量，頁面的打開速度形成了延遲 -->

解決方案二：手機端無需定義中文字體，使用系統默認，英文字體和數字字體能夠使用Helvetica(三種系統都支持)css3

body{font-family:Helvetica;}
        <!-- 缺點:天然是字體上就不能保證和設計圖字體一直 -->

移動端click屏幕產生200-300ms的延遲git

解決方案：
(1)fastclick.js
(2)zepto的tap事件也是爲了解決click的延遲問題

webkit表單元素的默認外觀怎麼重置

-webkit-appearance:none;

webkit中placeholder的顏色設置

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

-webkit-touch-callout: none;

禁止ios和android用戶選中文字

-webkit-user-select:none;

打電話發短信寫郵件怎麼實現

<!-- 打電話 -->
<a href="tel:13127995008">打電話給:13127995008</a>
<!-- 發短信  winphone系統無效-->
<a href="sms:13127995008">發短信給: 13127995008</a>
<!-- 寫郵件 -->
<a href="mailto:zyz@qq.com">zyz@qq.com</a>

fixed(固定定位) bug

場景描述：
    (1)ios下fixed元素容易出現錯位，軟件盤彈出時，影響fixed元素定位
    (2)android 下fixed表現要比ios好點,軟件盤彈出時,不會影響fixed元素定位
    (3)ios4下不支持position：fixed

解決方案：可用iscroll.js

移動端按鈕hover效果模擬

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
.btn_black{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #000;}
.btn_black_hover{background-color: #555;}
</style>
</head>
<body>
<div class="btn_black">按鈕</div>
<script type="text/javascript">
   var btnBlue = document.querySelector(".btn_black");
   btnBlue.ontouchstart = function(){
   this.className = "btn_black btn_black_hover";
}
   btnBlue.ontouchend = function(){
   this.className = "btn_black";
}
</script>
</body>
</html>

重置webkit表單默認樣式

-webkit-appearance:none;

禁用元素被點擊產生的陰影或邊框

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

iscroll4滾動區域中select,input,textarea元素沒法點擊的bug修復

緣由：iScroll4要監聽整個頁面事件,爲了達到最優效果，它默認禁用了全部元素的默認事件(a標籤除外),形成這些表單元素點擊沒有反應，沒法正常聚焦

解決方案1：
在iScroll.js中找到：onBeforeScrollStart : function(e){ e.preventDefault(); }

替換爲：onBeforeScrollStart : function(e){var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : 」);if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();}}

上述方案只能讓input,textarea能夠正常點擊，可是對select任然沒有效果

解決方案2：
將useTransform：true; //iscorll默認滾動模式是使用transform;

改成useTransform: false; //使用定位方式實現滾動

zepto.js中tap使用 e.stopPropagation() 阻止事件冒泡無效

<div class="li_item">
<span class="mypoto_cur">
</span>
</div>
$('.myphoto_list').delegate('.li_item','tap',function(e){
if(!$(e.target).hasClass("mypoto_cur")){
            ....
//加入一層判斷
         }
});