移動Web開發小結

derek_334892 發布于2019-08-29 11:22 / 1621人閱讀

摘要：在做移動開發時有很多地方跟端是不一樣的，需要不一樣的設置，這里就記錄下移動開發中有用的設置和一些通用代碼。其他關于打電話發短信發郵件的實現打電話給發短信給發郵件給關于布局移動端中對于的支持已經很好，是布局神器。

在做移動 Web 開發時有很多地方跟 PC 端是不一樣的，需要不一樣的設置，這里就記錄下移動 Web 開發中有用的設置和一些通用代碼。

我的博客地址 HTML 設置頁面寬度等于設備寬度，并禁止用戶縮放頁面

忽略頁面中的數字識別為電話，忽略email識別

開啟對web app程序的支持（僅針對IOS系統）

網站開啟對web app程序的支持，其實意思就是刪除默認的蘋果工具欄和菜單欄，開啟全屏顯示

改變頂部狀態條的顏色（僅針對IOS系統）

在 web app 下狀態條（屏幕頂部條）的顏色默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

完整的HTML模板









標題


這里開始內容

CSS css reset

html{
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉觸摸遮蓋層*/
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-user-select: none;/*禁止用戶選擇文字*/
}

/*設置所有盒子大小計算邊框內*/
*,
*:before,
*:after {
    box-sizing: border-box;
}

/*消除輸入框的陰影和邊框*/
input,textarea, select{
    -webkit-appearance: none; /*去掉webkit默認的表單樣式*/
    appearance: none;
    outline: none;
    border: none;
}

消除transition動畫閃屏

.animate {
    -webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
    -webkit-backface-visibility: hidden; /*設置進行轉換的元素的背面在面對用戶時是否可見：隱藏*/
}

開啟硬件加速

解決頁面閃白，保證動畫流暢。

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

其他 關于打電話、發短信、發郵件的實現

打電話給：10086
發短信給：10086
發郵件給：zhangxy_92@outlook.com

關于布局

移動端中對于flexbox的支持已經很好，flexbox是布局神器。阮一峰老師寫過flexbox 入門教程；以后自己可能也會寫一篇flexbox的學習和總結筆記。

GPU云服務器云服務器移動web開發 web移動端開發 HTML5移動Web開發指南移動web

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111603.html

移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

galaxy_robot 2019-08-01 17:40 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

ysl_unh 2019-08-21 16:44 評論0 收藏0
移動前端開發經驗小結

摘要：一概要本文檔針對移動前端開發，包括里面的頁面，非應用。一個失敗的圓圓角在移動平臺上開發時，用畫一個圓很簡單，只需要一句代碼不過，在上，這個定義將會失效，而顯示為默認的矩形。一、概要本文檔針對移動前端開發，包括 Hybrid 里面的web頁面，非 Native 應用。二、適用所有經驗適用于：iOS6.0+, Android4.0+ 三、小結 css偽類:active 如果你想使...

Zoom 2019-08-29 16:17 評論0 收藏0
移動前端開發經驗小結

摘要：一概要本文檔針對移動前端開發，包括里面的頁面，非應用。一個失敗的圓圓角在移動平臺上開發時，用畫一個圓很簡單，只需要一句代碼不過，在上，這個定義將會失效，而顯示為默認的矩形。一、概要本文檔針對移動前端開發，包括 Hybrid 里面的web頁面，非 Native 應用。二、適用所有經驗適用于：iOS6.0+, Android4.0+ 三、小結 css偽類:active 如果你想使...

baiy 2019-08-02 11:09 評論0 收藏0