常用的meta屬性設定
meta對於移動端的一些特殊屬性，可根據需要自行設定
**號碼識別
帶括號及加號的數字，形如：(+86)123456789
雙連線線的數字，形如：00-00-00111
11 位數字，形如：13800138000
關閉識別
123456
[email protected]
移動端 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
a,button,input,textarea
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 中，手指按住螢幕上下拖動，會觸發 touchmove 事件。這個事件觸發的物件是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。
「解決方案」
document.body.addeventlistener(
'touchmove',
function(e) ,
)
將日期字串的格式符號替換成'/'
'yyyy-mm-dd'.replace(/-/g, '/')
window.addeventlistener('resize', function() else
}, 0)}})
ios 中 input 鍵盤事件 keyup、keydown、等支援不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之後，並未立刻相應 keyup 事件
ios12 輸入框難以點選獲取焦點，彈不出軟鍵盤
定位找到問題是 fastclick.js 對 ios12 的相容性，可在 fastclick.js 原始碼或者 main.js 做以下修改
fastclick.prototype.focus = function(targetelement) else
}
通過監聽鍵盤回落時間滾動到原來的位置
window.addeventlistener('focusout', function() )
//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrolltop
$('input')
.focus(function() )
.blur(function() )
軟鍵盤喚起後，頁面的 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標籤，但是這種情況下往往會出現字型和的失真或者銳化。實現 大致如下 以...