移動端開發

時間 2019-11-29

標籤移動開發欄目無線简体版

原文原文鏈接

移動端開發

經常使用代碼

基本框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale = 1.0,maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="描述" />
  <meta name="keywords" content="關鍵字" />
  <meta content="yes" name="apple-mobile-web-app-capable">  <!--當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">  <!--將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式-->
  <meta content="telephone=no" name="format-detection">   <!-- 忽略將頁面中的數字識別爲電話號碼 -->
  <meta content="email=no" name="format-detection"> <!--忽略Android平臺中對郵箱地址的識別-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>
複製代碼

兼容代碼

語義標籤兼容IE

<!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
複製代碼

響應式佈局

rem佈局

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
複製代碼

rem配置參考

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
複製代碼

flex佈局

/* ============================================================
flex：定義佈局爲盒模型
flex-v：盒模型垂直佈局
flex-1：子元素佔據剩餘的空間
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素兩端對齊
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
//實例 兩端對齊
<div class="flex flex-pack-justify">
<div>模塊一</div>
<div>模塊二</div>
<div>模塊三</div>
<div>模塊四</div>
</div>
複製代碼

參考： flexyboxesjavascript

「老」的Flexbox和「新」的Flexboxcss

跨瀏覽器的Flexboxhtml

功能代碼

打電話

<a href="tel:0755-10086">打電話給:0755-10086</a>
複製代碼

發短信，winphone系統無效

<a href="sms:10086">發短信給: 10086</a>
複製代碼

寫郵件，可參考《移動web頁面給用戶發送郵件的方法》

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
複製代碼

模擬按鈕hover效果

兼容性ios5+、部分android 4+、winphone 8html5

a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;   font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
複製代碼

要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名java

var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
  this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
  this.className = "btn-blue"
}
複製代碼

屏幕旋轉的事件和樣式

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{}
 }
複製代碼

觸屏播放

$('html').one('touchstart',function(){
  audio.play()
})
複製代碼

手機拍照和上傳圖片

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

啓動硬件加速

.css {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
複製代碼

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

<input autocapitalize="off" autocorrect="off" />
複製代碼

android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}
複製代碼

問題解決方案

astclick能夠解決在手機上點擊事件的300ms延遲 zepto的touch模塊，tap事件也是爲了解決在click的延遲問題jquery

經常使用的移動端框架

zepto.js

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

最新版本已經更新到1.16ios

官網：zeptojs.com/css3

中文(非官網)：www.css88.com/doc/zeptojs…git

常使用的擴展模塊：

瀏覽器檢測：github.com/madrobby/ze…

tap事件：github.com/madrobby/ze…

iscroll.js

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

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

最新版本已經更新到5.0

官網：cubiq.org/iscroll-5

underscore.js

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

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

最新版本已經更新到1.8.2

官網：underscorejs.org/

滑屏框架

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

slip.js

iSlider.js

fullpage.js

FastClick

消除在移動瀏覽器上觸發click事件與一個物理Tap(敲擊)之間的300延遲

參考《FastClick》

轉載：peunzhang.cnblogs.com/

參考1

end

相關標籤/搜索

每日一句

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