移動端頁面開發總結[摘錄]

時間 2019-11-11

標籤移動頁面開發總結摘錄欄目無線简体版

原文原文鏈接

1.瀏覽窗口寬帶等於設備寬度css

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2.禁止數字識別爲電話號碼html

<meta name="format-detection" content="telephone=no" />

3.禁止安卓識別郵箱html5

<meta name="format-detection" content="email=no" />

4.移動端頁面基本模板jquery

<!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</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
   content
</body>

</html>

其餘：android

1.取消input在ios下，輸入的時候英文首字母的默認大寫ios

<input autocapitalize="off" autocorrect="off" />

2.android 上去掉語音輸入按鈕git

input::-webkit-input-speech-button {display: none}

3.屏幕旋轉的事件和樣式github

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("橫屏:" + window.orientation);
        case 0:
        case 180:
        alert("豎屏:" + window.orientation);
        break;
    }
}

//豎屏時使用的樣式
@media all and (orientation:portrait) {
.css{}
}

//橫屏時使用的樣式
@media all and (orientation:landscape) {
.css{}
}

4.audio元素和video元素在ios和andriod中沒法自動播放web

$('html').one('touchstart',function(){
    audio.play()
})

其餘相關：編程

1.ios7+支持自動播放
2.支持Airplay的設備（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏
webkit-playsinline="true"
以上代碼用法以下
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

5.搖一搖功能

//事件監聽
if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}

//捕捉重力加速度
var acceleration = eventData.accelerationIncludingGravity;

//搖一搖demo
var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;       
function deviceMotionHandler(eventData) {        
  var acceleration =eventData.accelerationIncludingGravity;
  var curTime = new Date().getTime();       
  if ((curTime - last_update)> 300) {                
      var diffTime = curTime -last_update;
      last_update = curTime;       
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;       
      var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;          
           if (speed > SHAKE_THRESHOLD) {
                alert("shaked!");
      }
      last_x = x;
      last_y = y;
      last_z = z;
    }
}

參考：http://segmentfault.com/a/1190000003095883

6.手機拍照和上傳圖片

<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">

使用總結：

ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋

7.微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整

緣由

android側是複寫了layoutinflater 對textview作了統一處理
ios側是修改了body.style.webkitTextSizeAdjust值
解決方案：

android使用如下代碼，該接口只在微信瀏覽器下有效(感謝jationhuang同窗提供)

/**
 * 頁面加入這段代碼可以使Android機器頁面再也不受到用戶字體縮放強制改變大小
 * 可是會有一個1秒左右的延遲，期間能夠考慮經過loading展現
 * 僅供參考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

其餘bug

android 2.3 bug

@-webkit-keyframes 須要以0%開始100%結束，0%的百分號不能去掉
after和before僞類沒法使用動畫
border-radius不支持%單位
translate百分比的寫法和scale在一塊兒會致使失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分
部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色

參考《border-radius 移動之傷》

設計高性能CSS3動畫的幾個要素

儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
利用translate3D開啓GPU加速

參考《High Performance Animations》

fixed bug

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed

解決方案

可用isroll.js，暫無完美方案

參考

《移動端web頁面使用position:fixed問題總結》

《使用iScroll.js解決ios4下不支持position:fixed的問題》

如何阻止windows Phone的默認觸摸事件

winphone下默認觸摸事件事件使用e.preventDefault是無效的

目前解決方法是使用樣式來禁用

html{-ms-touch-action: none;}/* 禁止winphone默認觸摸事件 */

參考

《Windows phone 8 touch support》

經常使用的移動端框架

zepto.js

語法與jquery幾乎同樣，會jquery基本會zepto~

最新版本已經更新到1.16

官網：http://zeptojs.com/

中文(非官網)：http://www.css88.com/doc/zeptojs_api/

常使用的擴展模塊：

瀏覽器檢測：https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js

iscroll.js

解決頁面不支持彈性滾動，不支持fixed引發的問題~

實現下拉刷新，滑屏，縮放等功能~

最新版本已經更新到5.0

官網：http://cubiq.org/iscroll-5

underscore.js

筆者沒用過，不過據說好用，推薦給你們~

該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。

最新版本已經更新到1.8.2

官網：http://underscorejs.org/

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

摘錄原文：http://www.cnblogs.com/PeunZhang/p/3407453.html#question_18

相關標籤/搜索

每日一句

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