成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動Web開發(fā)小結(jié)

derek_334892 / 1632人閱讀

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

在做移動 Web 開發(fā)時有很多地方跟 PC 端是不一樣的，需要不一樣的設(shè)置，這里就記錄下移動 Web 開發(fā)中有用的設(shè)置和一些通用代碼。
我的博客地址 HTML 設(shè)置頁面寬度等于設(shè)備寬度，并禁止用戶縮放頁面
忽略頁面中的數(shù)字識別為電話，忽略email識別
開啟對web app程序的支持（僅針對IOS系統(tǒng)） 
網(wǎng)站開啟對web app程序的支持，其實意思就是刪除默認的蘋果工具欄和菜單欄，開啟全屏顯示
改變頂部狀態(tài)條的顏色（僅針對IOS系統(tǒng)） 
在 web app 下狀態(tài)條（屏幕頂部條）的顏色默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；
完整的HTML模板 








標題


這里開始內(nèi)容
CSS css reset 
html{
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉觸摸遮蓋層*/
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-user-select: none;/*禁止用戶選擇文字*/
}

/*設(shè)置所有盒子大小計算邊框內(nèi)*/
*,
*: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; /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
    -webkit-backface-visibility: hidden; /*設(shè)置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏*/
}
開啟硬件加速 
解決頁面閃白，保證動畫流暢。
.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
其他 關(guān)于打電話、發(fā)短信、發(fā)郵件的實現(xiàn) 
打電話給：10086
發(fā)短信給：10086
發(fā)郵件給：[email protected]
關(guān)于布局 
移動端中對于flexbox的支持已經(jīng)很好，flexbox是布局神器。阮一峰老師寫過flexbox 入門教程；以后自己可能也會寫一篇flexbox的學(xué)習(xí)和總結(jié)筆記。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111603.html

相關(guān)文章

  • 移動web開發(fā)問題和優(yōu)化小結(jié)

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

    galaxy_robot 評論0 收藏0

  • 移動web開發(fā)問題和優(yōu)化小結(jié)

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

    ysl_unh 評論0 收藏0

  • 移動前端開發(fā)經(jīng)驗小結(jié)

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

    Zoom 評論0 收藏0

  • 移動前端開發(fā)經(jīng)驗小結(jié)

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

    baiy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<