移動端H5開發常用技巧總結

2022-06-26 18:57:09 字數 3482 閱讀 3643

常用的meta屬性設定

meta對於移動端的一些特殊屬性,可根據需要自行設定

**號碼識別

帶括號及加號的數字,形如:(+86)123456789

雙連線線的數字,形如:00-00-00111

11 位數字,形如:13800138000

關閉識別

開啟識別

123456

郵箱識別(android)

[email protected]

0.5px細線

移動端 h5 專案越來越多,設計師對於 ui 的要求也越來越高,比如 1px 的邊框。在高清屏下,移動端的 1px 會很粗。

那麼為什麼會產生這個問題呢?主要是跟乙個東西有關,dpr(devicepixelratio) 裝置畫素比,它是預設縮放為 100%的情況下,裝置畫素和 css 畫素的比值。目前主流的螢幕 dpr=2(iphone 8),或者 3(iphone 8 plus)。拿 2 倍屏來說,裝置的物理畫素要實現 1 畫素,而 dpr=2,所以 css 畫素只能是 0.5。

下面介紹最常用的方法

/* 底邊框 */

.b-border 

.b-border:before 

/* 上邊框 */

.t-border 

.t-border:before 

/* 右邊框 */

.r-border 

.r-border:before 

/* 左邊框 */

.l-border 

.l-border:before 

/* 四條邊 */

.setborderall 

}

遮蔽使用者選擇
div 

清除輸入框內陰影

如何禁止儲存或拷貝影象

**如下

img 

輸入框預設字型顏色

設定 input 裡面 placeholder 字型的顏色

input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder 

input:-moz-placeholder,

textarea:-moz-placeholder 

input:-ms-input-placeholder,

textarea:-ms-input-placeholder 

使用者設定字型大小放大或者縮小導致頁面布局錯誤

設定字型禁止縮放

body 

android系統中元素被點選時產生邊框
a,button,input,textarea

ios 滑動不流暢

ios 手機上下滑動頁面會產生卡頓,手指離開頁面,頁面立即停止運動。整體表現就是滑動不流暢,沒有滑動慣性。ios 5.0 以及之後的版本,滑動有定義有兩個值 auto 和 touch,預設值為 auto。

「解決方案」

在滾動容器上增加滾動 touch 方法

設定 overflow 設定外部 overflow 為 hidden,設定內容元素 overflow 為 auto。內部元素超出 body 即產生滾動,超出的部分 body 隱藏。

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

觸控事件的響應順序

ontouchstart

ontouchmove

ontouchend

onclick

$('html').one('touchstart', function() )

ios 上拉邊界下拉出現空白

手指按住螢幕下拉,螢幕頂部會多出一塊白色區域。手指按住螢幕上拉,底部多出一塊白色區域。

在 ios 中,手指按住螢幕上下拖動,會觸發 touchmove 事件。這個事件觸發的物件是整個 webview 容器,容器自然會被拖動,剩下的部分會成空白。

「解決方案」

document.body.addeventlistener(

'touchmove',

function(e) ,

)

ios 日期轉換 nan 的問題

將日期字串的格式符號替換成'/'

'yyyy-mm-dd'.replace(/-/g, '/')

ios 鍵盤彈起擋住原來的檢視
window.addeventlistener('resize', function()  else 

}, 0)}})

onkeyup 和 onkeydown 相容性問題

ios 中 input 鍵盤事件 keyup、keydown、等支援不是很好, 用 input 監聽鍵盤 keyup 事件,在安卓手機瀏覽器中沒有問題,但是在 ios 手機瀏覽器中用輸入法輸入之後,並未立刻相應 keyup 事件

ios12 輸入框難以點選獲取焦點,彈不出軟鍵盤

定位找到問題是 fastclick.js 對 ios12 的相容性,可在 fastclick.js 原始碼或者 main.js 做以下修改

fastclick.prototype.focus = function(targetelement)  else 

}

ios 鍵盤收起時頁面沒用回落,底部會留白

通過監聽鍵盤回落時間滾動到原來的位置

window.addeventlistener('focusout', function() )

//input輸入框彈起軟鍵盤的解決方案。

var bfscrolltop = document.body.scrolltop

$('input')

.focus(function() )

.blur(function() )

ios 下 fixed 失效的原因

軟鍵盤喚起後,頁面的 fixed 元素將失效,變成了 absolute,所以當頁面超過一屏且滾動時,失效的 fixed 元素就會跟隨滾動了。不僅限於 type=text 的輸入框,凡是軟鍵盤(比如時間日期選擇、select 選擇等等)被喚起,都會遇到同樣地問題。

解決方法: 不讓頁面滾動,而是讓主體部分自己滾動,主體部分高度設為 100%,overflow:scroll

.warper 

.fix-bottom

h5移動端css開發總結

font size 12px transform scale 10 12 需要注意這個方式雖然縮小了字型,但該文字元素所佔據的原寬高大小並不會跟著縮小,所以很多時候還需要考慮文字位置和間距的問題。一般文字位置需要結合 transform origin 屬性來設定。例如設定文字水平居左 垂直居中 tr...

移動端h5開發基礎

移動端h5開發基礎知識 一.手機端開發頁面必須要加一段 注 這段 的主要意思是 讓頁面寬度等於裝置寬度,縮放比例為1,禁止使用者縮放。用於檢測視口,主要的效果就是取消下面的滾動條,讓頁面適應螢幕。二.為自己的頁面設定最大寬度和最小寬度 主要作用是在螢幕足夠大的時候,頁面也不會失真。三.相容手機螢幕大...

H5移動端適配總結

因此通過查閱資料,了解到兩種螢幕適配的方案 1.通過對介面進行等比例縮放 2.使用rem單位進行介面的適配。1 第一種方式屬於有一種暴力適配,即通過計算設計人員給出的設計稿的尺寸和裝置的真實尺寸,將這個比值作為縮放比賦值飛meta標籤,但是這種情況下往往會出現字型和的失真或者銳化。實現 大致如下 以...