<meta name=&#34;apple-mobile-web-app-title&#34; content=&#34;標(biāo)題&#34;>


2. 啟用 WebApp 全屏模式（IOS）當(dāng)網(wǎng)站添加到主屏幕后再點(diǎn)擊進(jìn)行啟動時，可隱藏地址欄" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 移動端web開發(fā)技巧

移動端web開發(fā)技巧

時間：2023-05-31 05:54:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-31 05:54:02 來源：網(wǎng)站運(yùn)營

移動端web開發(fā)技巧：

META相關(guān)

1. 添加到主屏后的標(biāo)題（IOS）




<meta name="apple-mobile-web-app-title" content="標(biāo)題">



2. 啟用 WebApp 全屏模式（IOS）

當(dāng)網(wǎng)站添加到主屏幕后再點(diǎn)擊進(jìn)行啟動時，可隱藏地址欄（從瀏覽器跳轉(zhuǎn)或輸入鏈接進(jìn)入并沒有此效果）




<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />






3. 百度禁止轉(zhuǎn)碼

通過百度手機(jī)打開網(wǎng)頁時，百度可能會對你的網(wǎng)頁進(jìn)行轉(zhuǎn)碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標(biāo)簽來禁止它：




<meta http-equiv="Cache-Control" content="no-siteapp" />



百度SiteApp轉(zhuǎn)碼聲明

4. 設(shè)置狀態(tài)欄的背景顏色（IOS）

設(shè)置狀態(tài)欄的背景顏色，只有在 “apple-mobile-web-app-capable” content=”yes” 時生效




<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />



content 參數(shù)：

5. 移動端手機(jī)號碼識別（IOS）

在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接，比如：

可能還有其他類型的數(shù)字也會被識別。我們可以通過如下的meta來關(guān)閉電話號碼的自動識別：




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



開啟電話功能




<a href="tel:123456">123456</a>



開啟短信功能：




<a href="sms:123456">123456</a>



6. 移動端郵箱識別（Android）

與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字符串進(jìn)行識別，我們可以通過如下的meta來管別郵箱的自動識別：




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



同樣地，我們也可以通過標(biāo)簽屬性來開啟長按郵箱地址彈出郵件發(fā)送的功能：




<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>



7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）




<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">



8. IOS Web app啟動動畫

由于iPad 的啟動畫面是不包括狀態(tài)欄區(qū)域的。所以啟動圖片需要減去狀態(tài)欄區(qū)域所對應(yīng)的方向上的20px大小，相應(yīng)地在retina設(shè)備上要減去40px的大小




<!-- iPhone --><link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"><!-- iPhone (Retina) --><link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"><!-- iPad (portrait) --><link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"><!-- iPad (landscape) --><link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"><!-- iPad (Retina, portrait) --><link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"><!-- iPad (Retina, landscape) --><link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">



（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏后的APP圖標(biāo)

指定web app添加到主屏后的圖標(biāo)路徑，有兩種略微不同的方式：




<!-- 設(shè)計原圖 --><link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"><!-- 添加高光效果 --><link href="short_cut_114x114.png" rel="apple-touch-icon">






圖標(biāo)尺寸：

可通過指定size屬性來為不同的設(shè)備提供不同的圖標(biāo)（但通常來說，我們只需提供一個114 x 114 pixels大小的圖標(biāo)即可 ）

官方說明如下




Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes. For iPhone and iPod touch both of these sizes are required: 57 x 57 pixels 114 x 114 pixels (high resolution) For iPad, both of these sizes are required: 72 x 72 pixels 144 x 144 (high resolution)



10. 優(yōu)先使用最新版本 IE 和 Chrome




<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />



11.viewport模板




<!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>標(biāo)題</title><link rel="stylesheet" href="index.css"></head><body>這里開始內(nèi)容</body></html>



常見問題

1、移動端如何定義字體font-family

三大手機(jī)系統(tǒng)的字體：

ios 系統(tǒng)

android 系統(tǒng)

winphone 系統(tǒng)

各個手機(jī)系統(tǒng)有自己的默認(rèn)字體，且都不支持微軟雅黑
如無特殊需求，手機(jī)端無需定義中文字體，使用系統(tǒng)默認(rèn)
英文字體和數(shù)字字體可使用 Helvetica ，三種系統(tǒng)都支持




* 移動端定義字體的代碼 */body{font-family:Helvetica;}



2、移動端字體單位font-size選擇px還是rem

對于只需要適配手機(jī)設(shè)備，使用px即可

對于需要適配各種移動設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備

rem配置參考：




html {font-size:10px}@media screen and (min-width:480px) 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) and (max-width:959px) { html { font-size: 25px }}@media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px }}@media screen and (min-width:1080px) { html { font-size: 32px }}



3、移動端touch事件(區(qū)分webkit 和 winphone)

當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件

以下支持webkit

以下支持winphone 8

4、移動端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)

移動設(shè)備上的web網(wǎng)頁是有300ms延遲的，玩玩會造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。

以下是歷史原因：

2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機(jī)端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機(jī)上用瀏覽器打開一個PC上的網(wǎng)頁，你可能在看到頁面內(nèi)容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。

雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個元素時候，例如跳轉(zhuǎn)鏈接<a href=”#”></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理，如果t時間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應(yīng)，給用戶慢體驗(yàn)感覺，對于web開發(fā)者來說是，頁面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。

解決方案：

觸摸事件的響應(yīng)順序




1、ontouchstart 2、ontouchmove 3、ontouchend 4、onclick



解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應(yīng)

5、什么是Retina 顯示屏，帶來了什么問題

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個變?yōu)?個

在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍

那么，前端的應(yīng)對方案是：

設(shè)計稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2




//例如圖片寬高為：200px*200px，那么寫法如下.css{width:100px;height:100px;background-size:100px 100px;}



其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px




.css{font-size:20px}



6、ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉

ios用戶點(diǎn)擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩




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



7、部分android系統(tǒng)中元素被點(diǎn)擊時產(chǎn)生的邊框怎么去掉

android用戶點(diǎn)擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果




a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-user-modify:read-write-plaintext-only; }



-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符

另外，有些機(jī)型去除不了，如小米2

對于按鈕類還有個辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽

8、winphone系統(tǒng)a、input標(biāo)簽被點(diǎn)擊時產(chǎn)生的半透明灰色背景怎么去掉




<meta name="msapplication-tap-highlight" content="no">



9、webkit表單元素的默認(rèn)外觀怎么重置




.css{-webkit-appearance:none;}



10、webkit表單輸入框placeholder的顏色值能改變么




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



11、webkit表單輸入框placeholder的文字能換行么

ios可以，android不行~

12. 關(guān)閉iOS鍵盤首字母自動大寫

在iOS中，默認(rèn)情況下鍵盤是開啟首字母大寫的功能的，如果啟用這個功能，可以這樣：




<input type="text" autocapitalize="off" />



13. 關(guān)閉iOS輸入自動修正

和英文輸入默認(rèn)自動首字母大寫那樣，IOS還做了一個功能，默認(rèn)輸入法會開啟自動修正輸入內(nèi)容，這樣的話，用戶經(jīng)常要操作兩次。如果不希望開啟此功能，我們可以通過input標(biāo)簽屬性來關(guān)閉掉：




<input type="text" autocorrect="off" />



14. 禁止文本縮放

當(dāng)移動設(shè)備橫豎屏切換時，文本的大小會重新計算，進(jìn)行相應(yīng)的縮放，當(dāng)我們不需要這種情況時，可以選擇禁止：




html {　　 -webkit-text-size-adjust: 100%;}



需要注意的是，PC端的該屬性已經(jīng)被移除，該屬性在移動端要生效，必須設(shè)置 `meta viewport’。

15. 移動端如何清除輸入框內(nèi)陰影

在iOS上，輸入框默認(rèn)有內(nèi)部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關(guān)閉：




input,textarea {　　border: 0; /* 方法1 */　　-webkit-appearance: none; /* 方法2 */}



16. 快速回彈滾動

我們先來看看回彈滾動在手機(jī)瀏覽器發(fā)展的歷史：

在iOS上如果你想讓一個元素?fù)碛邢?Native 的滾動效果，你可以這樣做：




.xxx { overflow: auto; /* auto | scroll */ -webkit-overflow-scrolling: touch;}



PS：iScroll用過之后感覺不是很好，有一些詭異的bug，這里推薦另外一個 iDangero Swiper，這個插件集成了滑屏滾動的強(qiáng)大功能（支持3D），而且還有回彈滾動的內(nèi)置滾動條，官方地址：

iDangero

17. 移動端禁止選中內(nèi)容

如果你不想用戶可以選中頁面中的內(nèi)容，那么你可以在css中禁掉：




.user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移動端不需要） */ -ms-user-select: none; /* IE 10+ */ }



18. 移動端取消touch高亮效果

在做移動端頁面時，會發(fā)現(xiàn)所有a標(biāo)簽在觸發(fā)點(diǎn)擊時或者所有設(shè)置了偽類 :active 的元素，默認(rèn)都會在激活狀態(tài)時，顯示高亮框，如果不想要這個高亮，那么你可以通過css以下方法來進(jìn)行全局的禁止：




html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}



但這個方法在三星的機(jī)子上無效，有一種妥協(xié)的方法是把頁面非真實(shí)跳轉(zhuǎn)鏈接的a標(biāo)簽換成其它標(biāo)簽，可以解決這個問題。

19. 如何禁止保存或拷貝圖像（IOS）

通常當(dāng)你在手機(jī)或者pad上長按圖像 img ，會彈出選項(xiàng) 存儲圖像 或者 拷貝圖像，如果你不想讓用戶這么操作，那么你可以通過以下方法來禁止：




img { -webkit-touch-callout: none; }



20.模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發(fā)生，是一個比較好體驗(yàn)，但是移動設(shè)備中并沒有鼠標(biāo)指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下，




<!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">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;}</style></head><body> <div class="btn-blue">按鈕</div> <script type="text/javascript">document.addEventListener("touchstart", function(){}, true)</script></body></html>



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

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




<!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">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-on{background-color: #357AE8;}</style></head><body> <div class="btn-blue">按鈕</div> <script type="text/javascript">var btnBlue = document.querySelector(".btn-blue");btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on"}btnBlue.ontouchend = function(){ this.className = "btn-blue"}</script></body></html>



21.屏幕旋轉(zhuǎn)的事件和樣式

事件

window.orientation，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式；




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



樣式




//豎屏?xí)r使用的樣式@media all and (orientation:portrait) { .css{}} //橫屏?xí)r使用的樣式@media all and (orientation:landscape) { .css{}}



22.audio元素和video元素在ios和andriod中無法自動播放

應(yīng)對方案：觸屏即播




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



23.搖一搖功能

HTML5 deviceMotion：封裝了運(yùn)動傳感器數(shù)據(jù)的事件，可以獲取手機(jī)運(yùn)動狀態(tài)下的運(yùn)動加速度等數(shù)據(jù)。

24.手機(jī)拍照和上傳圖片

<input type=”file”>的accept 屬性




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



使用總結(jié)：

25. 消除transition閃屏




.css{ /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/ -webkit-transform-style: preserve-3d; /*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏）*/ -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);}



設(shè)計高性能CSS3動畫的幾個要素

26. android 上去掉語音輸入按鈕




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



框架

1. 移動端基礎(chǔ)框架

2. 滑屏框架

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

3.瀑布流框架

masonry

工具推薦

更多有趣的前端開發(fā)專題點(diǎn)擊暗號進(jìn)入：本站

JavaScript

jQuery

typescript



關(guān)鍵詞：技巧,移動

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉