關於H5移動端開發 iPhone X適配

2021-08-14 15:05:18 字數 605 閱讀 7376

一、 **查詢、

@media screen and (device-width:375px) and (device-height:812px)

.mui-content

}

二、ios11 新增特性,蘋果公司為了適配 iphonex 對現有 viewport meta 標籤的乙個擴充套件,用於設定網頁在可視視窗的布局方式,

<

meta

name

="viewport"

content

="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"

>

三、測試中發現如果頁面內容不夠多的時候。底部會有白色的間距,測試為44px,這需要設定頁面的高度加44,應該是ios11的bug。

$(".mui-content").css("height",(window.innerheight+44)+"px");

移動端h5開發基礎

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

h5移動端css開發總結

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

移動端 h5 開發筆記

1.禁止縮放 禁止快取 2.webkit 定製css 更多參考 webkit touch callout none webkit user select none webkit text size adjust none webkit tap highlight color rgba 0,0,0,1...