移動端開發必須知道的小技巧(轉)

来源:https://www.cnblogs.com/xuwendong/archive/2019/08/31/11440660.html
-Advertisement-
Play Games

前言 最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的 ...


前言

最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的meta標簽及一些小技巧。

  1. viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

這個是移動端頁面開發必備的標簽,用來調整佈局視口同視覺視口一致,禁止頁面縮放等。

  1. 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 標簽解決的。

  1. 設置頂部狀態欄的顏色

<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。

  1. webapp添加到主屏後的標題(iOS 6 新增)

<meta name="apple-mobile-web-app-title" content="title">

  1. 設置緩存

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

手機頁面通常在第一次載入後會進行緩存,然後每次刷新會使用緩存而不是去重新向伺服器發送請求。如果不希望使用緩存可以設置no-cache。

  1. format-detection

format-detection 啟動或禁用自動識別頁面中的電話號碼。

語法:

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

說明:

預設情況下,設備會自動識別任何可能是電話號碼的字元串。設置telephone=no可以禁用這項功能。

  1. html5調用安卓或者ios的撥號功能

html5提供了自動調用撥號的標簽,只要在a標簽的href中添加tel:就可以了。

撥打手機直接如下:

<a href="tel:15677776767">點擊撥打15677776767</a>

PS:如果遇到這種情況失效,可以在頁面頭部 添加 上一條meta 標簽,content 設置為 yes。

  1. iphone及ipad下輸入框預設出現內陰影。
Element{
  -webkit-appearance: none; 
}
  1. 移動端滑動頁面絕對定位元素出現抖動

這個問題自己網上找了一些解決辦法,僅供參考。

  • 給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>
  1. iphone下 input 框游標過長

input 輸入框在 iPhone 下 游標過長,Android顯示正常。

方法:

調低 input 標簽的 line-height 樣式值。

  1. ios 下 頁面滑動卡頓,不流暢

在內容出現滾動的元素上設置一條css樣式,實現慣性滾動和彈性效果。

{
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果,它有兩個值:

auto: 使用普通滾動, 當手指從觸摸屏上移開,滾動會立即停止。

touch:
使用具有回彈效果的滾動, 當手指從觸摸屏上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

  1. 頁面頂部固定定位元素或底部固定定位元素遮擋頁面部分內容。

方法一:

給最外層的div加上 padding-bottom, 值為 固定定位元素高度;

方法二:

利用偽元素,給最外層div添加偽元素 after,設置高度為 固定定位元素高度。


.wrapper::after{
  content: '';
  height: '固定定位元素高度';
}
  1. 禁止複製、選中文本
Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
  1. 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的效果!

  1. webview 下部分 JavaScript 代碼沒有執行,比如 alert()等。

解決辦法:

webview只是一個承載體、各種內容的渲染需要使用webviewChromClient去實現、所以set一個預設的基類WebChromeClient就行。

PS:這部分需要原生開發協助設置一個 基類 WebChromeClient,代碼:

WebView.setWebChromeClient()

  1. 移動端點擊300ms延遲

300ms 尚可接受,不過因為300ms產生的問題,我們必須要解決。300ms導致用戶體驗並不是很好,解決這個問題,我們一般在移動端用 tap 事件來取代click 事件。

推薦兩個 js,一個是 fastclick,一個是 tap.js

關於移動端點擊延遲處理方案,詳細敘述請看:移動端點擊延遲處理方案

  1. 移動端點擊穿透問題

案例如下:

<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鏈接上。

解決辦法:

  1. 儘量都使用 touch 事件來替換click事件。例如用touchend事件(推薦)。
  2. 用 fastclick,詳情看上面 GitHub 倉庫。

  3. 用preventDefault阻止a標簽的click。

  4. 延遲一定的時間(300ms+)來處理事件 (不推薦)。

  5. 以上一般都能解決,實在不行就換成click事件。

下麵介紹一下touchend事件,如下:


$("#haorooms").on("touchend", function (event) {
   event.preventDefault()
 
 })
  1. iOS中,中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格

可以通過正則去掉

this.value = this.value.replace(/\u2006/g, '')

  1. 解決 iOS 中 video 標簽視頻自動全屏播放問題

給 video 標簽添加 屬性:

<!-- 針對 iOS8,9下生效  -->
<video webkit-playsinline="webkit-playsinline"></video>

<!-- ios10 及以上 -->

<video playsinline="playsinline"></video>

PS: 如果是內嵌入 webview 下 還需要原生開發的伙伴添加以下支持代碼:

webView.allowsInlineMediaPlayback = YES;

  1. 移動端點擊鏈接發送郵件
<a href="mailto:[email protected]?subject=TestObject">[email protected]</a>

點擊後直接給 [email protected] 發郵件,主題為:TestObject 。

PS: 如果遇到這種情況失效,可以在頁面頭部 添加 一條meta 標簽,content 設置為 yes。

<meta name="format-detection" content="email=yes">
  1. 移動端滾動穿透

描述:

 在打開的彈窗或者遮罩層上滾動, 會影響到下層的body元素的滾動。 體驗很不好。

解決辦法:

一般思路是在打開彈框或遮罩層的時候,獲取html的scrollTop, 給body改為fixed定位, top值為負的scrollTop值。 關閉彈框的時候,把fixed定位去掉。還原scrollTop值。

  1. 移動端佈局方式

這個基本是我們做移動開發首先需要確定的一個方案,我總結為一句話:

經典的 REM 佈局與新秀 VW 佈局

當然還有常見的比如 彈性盒子(flex) 都可以。

不過需要說的是,淘寶 flexible.js 佈局的作者已經推薦我們選用 vw 佈局。

這部分大家可以自己網上查閱相關資料,我這裡就不多做累述了。

原文地址:https://www.cnblogs.com/cs96/p/11440142.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 寫了一個bat命令,定期去清理一些SQL Server的Dump文件,然後配置成SQL Server作業,作業執行時報許可權錯誤,具體錯誤信息如下所示: Message Executed as user: NT Service\SQLSERVERAGENT. The process could not... ...
  • DJI_Mobile_SDK是大疆為開發者提供的開發無人機應用的開發介面,可以實現對無人機飛行的控制,也可以利用無人機相機完成一些視覺任務。目前網上的開發教程主要集中於DJI 開發者社區,網上的資源非常少。廢話不多說~~,現在將在Android項目中學習到的東西總結一下。 使用大疆無人機做電腦視覺 ...
  • 好了,的所有的基礎知識已經準備完畢了,現在開始製作引導頁。這個引導頁需要一個HTML文件,JS文件,一個CSS文件。在HBuilderX中根目錄下添加“Guid.html”,在JS文件夾添加“myth.js”,在CSS文件夾下添加“myth.css”。 一、myth.js文件 該文件是個插件,對常用 ...
  • 最近因為換工作的原因沒有寫博客,現在慢慢穩定了,我準備寫一些關於Android 進階的文章,也是為了督促自己學習,大家一起進步! 今天詳細的分析一下Android APP架構之一:MVC ### MVC簡介 >[MVC](https://baike.baidu.com/item/MVC)全名是Mod ...
  • react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技術開發仿微信聊天室RN_ChatRoom,實現了app全屏啟動頁、popupWindow彈窗菜單、消息觸摸列表、發送消息、表情(動圖),圖片預覽,拍攝... ...
  • 前言 Koa 應用程式是一個包含一組中間件函數的對象,它是按照類似堆棧的方式組織和執行的。 當一個中間件調用 next() 則該函數暫停並將控制傳遞給定義的下一個中間件。當在下游沒有更多的中間件執行後,堆棧將展開並且每個中間件恢復執行其上游行為。 以上兩句話,是我在官方文檔中找到其對 Koa 中間件 ...
  • 08.31自我總結 Vue CLI項目 vue cookie與vue cookies處理cookie vue cookie 一.模塊的安裝 二.配置main.js 三.使用 概述: :this.$配置時候設置的名稱.set('cookies的key',value,時間最小單位為天且一定要為整數) : ...
  • CSS 選擇器: CSS id選擇器: id選擇器可以為標有特定 id的HTML元素指定特定的樣式 id選擇器是以 “ ” 來定義的 id選擇器常建立 派生選擇器 如上,在使用sidebar選擇器時,應用在p標簽上會使用第一個CSS樣式 單獨的選擇器 id選擇器即使不被用來創建 派生選擇器,也可以單 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...