前言 最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的 ...
前言
最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的meta標簽及一些小技巧。
- viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
這個是移動端頁面開發必備的標簽,用來調整佈局視口同視覺視口一致,禁止頁面縮放等。
apple-mobile-web-app-capable
apple-mobile-web-app-capable
是設置 Web 應用是否以全屏模式運行。
語法:
<meta name="apple-mobile-web-app-capable" content="yes">
說明:
如果 content 設置為yes,Web應用會以全屏模式運行,反之,則不會。content的預設值是no,表示正常顯示。如果選擇全屏模式運行,則會刪除預設的蘋果工具欄和菜單欄。
我開篇遇到的問題就是通過設置該 meta 標簽解決的。
- 設置頂部狀態欄的顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明:
這個標簽起作用的前提是 必須事先開啟了全屏模式運行 webapp,即 第二條的 meta 標簽必須同步指定,否則這個標簽不起作用。
如果content設置為default,則狀態欄正常顯示。如果設置為blank,則狀態欄會有一個黑色的背景。如果設置為blank-translucent,則狀態欄顯示為黑色半透明。如果設置為default或blank,則頁面顯示在狀態欄的下方,即狀態欄占據上方部分,頁面占據下方部分,二者沒有遮擋對方或被遮擋。如果設置為blank-translucent,則頁面會充滿屏幕,其中頁面頂部會被狀態欄遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina屏幕為40px)。預設值是default。
- webapp添加到主屏後的標題(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="title">
- 設置緩存
<meta http-equiv="Cache-Control" content="no-cache" />
手機頁面通常在第一次載入後會進行緩存,然後每次刷新會使用緩存而不是去重新向伺服器發送請求。如果不希望使用緩存可以設置no-cache。
- format-detection
format-detection 啟動或禁用自動識別頁面中的電話號碼。
語法:
<meta name="format-detection" content="telephone=no">
說明:
預設情況下,設備會自動識別任何可能是電話號碼的字元串。設置telephone=no可以禁用這項功能。
- html5調用安卓或者ios的撥號功能
html5提供了自動調用撥號的標簽,只要在a標簽的href中添加tel:就可以了。
撥打手機直接如下:
<a href="tel:15677776767">點擊撥打15677776767</a>
PS:如果遇到這種情況失效,可以在頁面頭部 添加 上一條meta 標簽,content 設置為 yes。
- iphone及ipad下輸入框預設出現內陰影。
Element{
-webkit-appearance: none;
}
- 移動端滑動頁面絕對定位元素出現抖動
這個問題自己網上找了一些解決辦法,僅供參考。
- 給body設置高度100%
body,html{
widht:100%;
height:100%;
}
如果是項目中已經做好的頁面,有其他特效,直接設置這個屬性,可能對頁面的其他功能造成影響。
如果使用此法,本地調試效果不好,建議不要使用。
- 給固定定位的元素添加transform屬性
transform:translateZ(0);
或者transform:translate3d(0,0,0);
- 外層嵌套一個盒子
多加一層盒子,外層fixed固定定位,內層的設置絕對定位absolute;
<div style='position: fixed;'>
<div style='position: absolute'>
...
</div>
</div>
- iphone下 input 框游標過長
input 輸入框在 iPhone 下 游標過長,Android顯示正常。
方法:
調低 input 標簽的 line-height 樣式值。
- ios 下 頁面滑動卡頓,不流暢
在內容出現滾動的元素上設置一條css樣式,實現慣性滾動和彈性效果。
{
-webkit-overflow-scrolling: touch;
}
-webkit-overflow-scrolling
屬性控制元素在移動設備上是否使用滾動回彈效果,它有兩個值:
auto
: 使用普通滾動, 當手指從觸摸屏上移開,滾動會立即停止。
touch
:
使用具有回彈效果的滾動, 當手指從觸摸屏上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
- 頁面頂部固定定位元素或底部固定定位元素遮擋頁面部分內容。
方法一:
給最外層的div加上 padding-bottom
, 值為 固定定位元素高度;
方法二:
利用偽元素,給最外層div添加偽元素 after,設置高度為 固定定位元素高度。
.wrapper::after{
content: '';
height: '固定定位元素高度';
}
- 禁止複製、選中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
- IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
用input search做模糊搜索的時候,在鍵盤裡面輸入關鍵詞,會通過ajax後臺查詢,然後返回數據,然後再對返回的數據進行關鍵詞標紅。用input監聽鍵盤keyup事件,在安卓手機瀏覽器中是可以的,但是在ios手機瀏覽器中變紅很慢,用輸入法輸入之後,並未立刻相應keyup事件,只有在通過刪除之後才能相應!
解決辦法:
可以用html5的oninput事件去代替keyup
<input type="text" id="test">
<script type="text/javascript">
document.getElementById('test').addEventListener('input', function(e){
var value = e.target.value
....
})
</script>
然後就達到類似keyup的效果!
- webview 下部分 JavaScript 代碼沒有執行,比如 alert()等。
解決辦法:
webview只是一個承載體、各種內容的渲染需要使用webviewChromClient去實現、所以set一個預設的基類WebChromeClient就行。
PS:這部分需要原生開發協助設置一個 基類 WebChromeClient,代碼:
WebView.setWebChromeClient()
- 移動端點擊300ms延遲
300ms 尚可接受,不過因為300ms產生的問題,我們必須要解決。300ms導致用戶體驗並不是很好,解決這個問題,我們一般在移動端用 tap 事件來取代click 事件。
推薦兩個 js,一個是 fastclick
,一個是 tap.js
。
關於移動端點擊延遲處理方案,詳細敘述請看:移動端點擊延遲處理方案
- 移動端點擊穿透問題
案例如下:
<div id="haorooms">點透事件測試</div>
<a href="http://www.baidu.com">百度</a>
div是絕對定位的蒙層, 並且z-index高於a。而a標簽是頁面中的一個鏈接,我們給div綁定tap事件:
$('#haorooms').on('tap',function(){
$('#haorooms').hide()
})
我們點擊蒙層時 div正常消失,但是當我們在a標簽上點擊蒙層時,發現a鏈接被觸發,這就是所謂的點透事件。
原因:
touchstart 早於 touchend 早於click。 亦即click的觸發是有延遲的,這個時間大概在300ms左右,也就是說我們tap觸發之後蒙層隱藏, 此時 click還沒有觸發,300ms之後由於蒙層隱藏,我們的click觸發到了下麵的a鏈接上。
解決辦法:
- 儘量都使用 touch 事件來替換click事件。例如用touchend事件(推薦)。
-
用 fastclick,詳情看上面 GitHub 倉庫。
-
用preventDefault阻止a標簽的click。
-
延遲一定的時間(300ms+)來處理事件 (不推薦)。
-
以上一般都能解決,實在不行就換成click事件。
下麵介紹一下touchend事件,如下:
$("#haorooms").on("touchend", function (event) {
event.preventDefault()
})
- iOS中,中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格
可以通過正則去掉
this.value = this.value.replace(/\u2006/g, '')
- 解決 iOS 中 video 標簽視頻自動全屏播放問題
給 video 標簽添加 屬性:
<!-- 針對 iOS8,9下生效 -->
<video webkit-playsinline="webkit-playsinline"></video>
<!-- ios10 及以上 -->
<video playsinline="playsinline"></video>
PS: 如果是內嵌入 webview 下 還需要原生開發的伙伴添加以下支持代碼:
webView.allowsInlineMediaPlayback = YES;
- 移動端點擊鏈接發送郵件
<a href="mailto:[email protected]?subject=TestObject">[email protected]</a>
點擊後直接給 [email protected] 發郵件,主題為:TestObject 。
PS: 如果遇到這種情況失效,可以在頁面頭部 添加 一條meta 標簽,content 設置為 yes。
<meta name="format-detection" content="email=yes">
- 移動端滾動穿透
描述:
在打開的彈窗或者遮罩層上滾動, 會影響到下層的body元素的滾動。 體驗很不好。
解決辦法:
一般思路是在打開彈框或遮罩層的時候,獲取html的scrollTop, 給body改為fixed定位, top值為負的scrollTop值。 關閉彈框的時候,把fixed定位去掉。還原scrollTop值。
- 移動端佈局方式
這個基本是我們做移動開發首先需要確定的一個方案,我總結為一句話:
經典的 REM 佈局與新秀 VW 佈局
當然還有常見的比如 彈性盒子(flex) 都可以。
不過需要說的是,淘寶 flexible.js 佈局的作者已經推薦我們選用 vw 佈局。
這部分大家可以自己網上查閱相關資料,我這裡就不多做累述了。
原文地址:https://www.cnblogs.com/cs96/p/11440142.html