移動端web開發常見問題------彭記(023)

阿新 • • 發佈：2017-09-10

方式方案產生按鈕適用於效果 sap javascrip -a

Meta相關

1. 添加到主屏後的標題（IOS）

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

當網站添加到主屏幕後再點擊進行啟動時，可隱藏地址欄（從瀏覽器跳轉或輸入鏈接進入並沒有此效果）

3. 百度禁止轉碼

通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標簽來禁止它：

百度SiteApp轉碼聲明：http://t.cn/R28wSBl

4. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在"apple-mobile-web-app-capable" content="yes"時生效

content 參數：

default ：狀態欄背景是白色。
black ：狀態欄背景是黑色。

black-translucent ：狀態欄背景是半透明。如果設置為 default 或 black ,網頁內容從狀態欄底部開始。
如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5.移動端手機號碼識別（IOS）

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

7位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙連接線的數字，形如：00-00-00111
11位數字，形如：13800138000

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

開啟電話功能

開啟短信功能：

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

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

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

<a mailto:[email protected]">[email protected]</a>

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

8. IOS Web app啟動動畫

由於iPad 的啟動畫面是不包括狀態欄區域的。所以啟動圖片需要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小。

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏後的APP圖標

指定web app添加到主屏後的圖標路徑，有兩種略微不同的方式：

apple-touch-icon：在IOS6及以下的版本會自動為圖標添加一層高光效果（IOS7開始已使用扁平化的設計風格）
apple-touch-icon-precomposed：使用“設計原圖圖標”

效果：

圖標尺寸：

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

官方說明如下：

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. 優先使用最新版本 IE 和 Chrome

11.viewport模板

<html>

<head>

</head>

<body>

這裏開始內容

</body>

</html>

常見問題

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

三大手機系統的字體：

iOS 系統

默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體

Android 系統

默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體

Winphone 系統

默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體

各個手機系統有自己的默認字體，且都不支持微軟雅黑，如無特殊需求，手機端無需定義中文字體，使用系統默認英文字體和數字字體可使用 Helvetica ，三種系統都支持。

* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

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

對於只需要適配手機設備，使用px即可
對於需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備

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事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

以下支持webkit

touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指
touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

以下支持winphone 8

MSPointerDown——當手指觸碰屏幕時候發生。不管當前有多少只手指
MSPointerMove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action:
none;}可以阻止默認情況的發生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發

4、移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。

以下是歷史原因：

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

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

原因就出在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區域進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間裏用戶未進行下一次點擊，則瀏覽器會做單擊跳轉鏈接的處理，如果t時間裏用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那麽這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回調函數處理，需要300ms後才生效，也就間接導致影響其他業務邏輯的處理。

解決方案：

fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是為了解決在click的延遲問題

觸摸事件的響應順序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

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

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

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個

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

那麽，前端的應對方案是：

設計稿切出來的圖片長寬保證為偶數，並使用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系統中元素被觸摸時產生的半透明灰色遮罩怎麽去掉

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

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

7、部分android系統中元素被點擊時產生的邊框怎麽去掉

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

a,button,input,textarea{

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

-webkit-user-modify:read-write-plaintext-only;

}

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

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽

8、winphone系統a、input標簽被點擊時產生的半透明灰色背景怎麽去掉

9、webkit表單元素的默認外觀怎麽重置

.css{-webkit-appearance:none;}

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

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

input:focus::-webkit-input-placeholder{color:#E

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

iOS可以，Android不行~

關閉iOS鍵盤首字母自動大寫

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

12. 關閉iOS輸入自動修正

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

13. 禁止文本縮放

當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

html {

　　 -webkit-text-size-adjust: 100%;

}

需要註意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 meta viewport。

14. 移動端如何清除輸入框內陰影

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

input,

textarea {

　　border: 0; /* 方法1 */

　　-webkit-appearance: none; /* 方法2 */

}

15. 快速回彈滾動

我們先來看看回彈滾動在手機瀏覽器發展的歷史：

早期的時候，移動端的瀏覽器都不支持非body元素的滾動條，所以一般都借助 iScroll;
Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能通過2個手指進行滾動；
Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果，不過隨後這個特性又被移除；
iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果

在iOS上如果你想讓一個元素擁有像 Native 的滾動效果，你可以這樣做：

.xxx {

overflow: auto; /* auto | scroll */

-webkit-overflow-scrolling: touch;

}

PS：iScroll用過之後感覺不是很好，有一些詭異的bug，這裏推薦另外一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），而且還有回彈滾動的內置滾動條。iDangero官方地址： :www.idangero.us/swiper/#.VX_t9PmEB8Y

16. 移動端禁止選中內容

如果你不想用戶可以選中頁面中的內容，那麽你可以在css中禁掉：

.user-select-none {

-webkit-user-select: none; /* Chrome all / Safari all */

-moz-user-select: none; /* Firefox all （移動端不需要） */

-ms-user-select: none; /* IE 10+ */

}

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

在做移動端頁面時，會發現所有a標簽在觸發點擊時或者所有設置了偽類 :active 的元素，默認都會在激活狀態時，顯示高亮框，如果不想要這個高亮，那麽你可以通過css以下方法來進行全局的禁止：

html {

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

}

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉鏈接的a標簽換成其它標簽，可以解決這個問題。

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

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

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

19.模擬按鈕hover效果

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

<html>

<head>

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>

document.addEventListener("touchstart", function(){}, true)

</script>

</body>

</html>

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

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

<html>

<head>

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>

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>

20.屏幕旋轉的事件和樣式

事件

window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；

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{}

}

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

應對方案：觸屏即播

$(‘html‘).one(‘touchstart‘,function(){

audio.play()

})

22.搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

23.手機拍照和上傳圖片

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

使用總結：

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

24.消除transition閃屏

.css{

/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/

-webkit-transform-style: preserve-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);

}

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

盡可能地使用合成屬性transform和opacity來設計CSS3動畫
不使用position的left和top來定位
利用translate3D開啟GPU加速

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

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

框架

1. 移動端基礎框架

zepto.js語法與jquery幾乎一樣，會jquery基本會zepto；
iscroll.js解決頁面不支持彈性滾動，不支持fixed引起的問題~ 實現下拉刷新，滑屏，縮放等功能；
underscore.js該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象；
fastclick加快移動端點擊響應時間
animate.css CSS3動畫效果庫

2.滑屏框架

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

slip.js
iSlider.js
fullpage.js

3.瀑布流框架

masonry

工具推薦

caniuse 各瀏覽器支持html5屬性查詢
paletton 調色搭配

移動端web開發常見問題------彭記(023)

方式方案產生按鈕適用於效果 sap javascrip -a Meta相關 1. 添加到主屏後的標題（IOS） <meta name="apple-mobile-web-app-title" content="標題"> 2. 啟用 WebApp 全

移動端web開發常見問題------彭記(023)

Meta相關

1. 添加到主屏後的標題（IOS）

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

3. 百度禁止轉碼

4. 設置狀態欄的背景顏色（IOS）

5.移動端手機號碼識別（IOS）

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

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

8. IOS Web app啟動動畫

9. 添加到主屏後的APP圖標

10. 優先使用最新版本 IE 和 Chrome

11.viewport模板

常見問題

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

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

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

4、移動端click屏幕產生200-300 ms的延遲響應

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

6、ios系統中元素被觸摸時產生的半透明灰色遮罩怎麽去掉

7、部分android系統中元素被點擊時產生的邊框怎麽去掉

8、winphone系統a、input標簽被點擊時產生的半透明灰色背景怎麽去掉

9、webkit表單元素的默認外觀怎麽重置

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

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

12. 關閉iOS輸入自動修正

13. 禁止文本縮放

14. 移動端如何清除輸入框內陰影

15. 快速回彈滾動

16. 移動端禁止選中內容

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

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

19.模擬按鈕hover效果

20.屏幕旋轉的事件和樣式

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

22.搖一搖功能

23.手機拍照和上傳圖片

24.消除transition閃屏

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

框架

1. 移動端基礎框架

2.滑屏框架

3.瀑布流框架

相關推薦