標籤:web頁面 scala use pre ret 頁面 height 適配 tps
概念理解viewport視口
- visual viewport 可見視口,裝置螢幕的寬度 windw.innerWidth/Height
- layout viewport 布局視口,DOM寬度 document.documentElement.cliendWidth/Heig
ideal viewport 理想視口:目標是讓把預設的layout viewport寬度設定為行動裝置的螢幕寬度
- visual viewport = layout viewport * scale
<meta name="viewport" content="width=device-width,initial-scale=1">
width: viewport寬度
initial-scale:頁面初始縮放
maximum/minimum-scale:允許使用者縮放的最小/最大比例
user-scalable:yes/no是否允許使用者手動縮放
像素的一些事物理像素(physical pixel)
裝置像素,裝置中的最小一個物理組件。比如說,一倍屏、二倍屏(Retina)、三倍屏指的是以多少物理像素來顯示一個CSS像素。Retina螢幕,一個css像素對應4個物理像素。
css像素
css像素是抽象單位,主要用在瀏覽器上。CSS稱為裝置無關的像素(device-independent pixel)簡稱DIPs。
早起iphone3的解析度是320x480,retina螢幕的解析度640x960,螢幕尺寸不變但是像素提高了一倍。這時候,一個css像素等於兩個物理像素。
裝置像素比dpr(device pixel ratio)
裝置像素比 = 物理像素/裝置獨立像素 (對於retina屏的iphone,dpr = 2,即1css像素相等於2個物理像素)
viewport的scale和dpr互為倒數。
- JavaScript:window.devicePixelRatio
- CSS: -webkit-device-pixel-ration, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio
前端適配的相關方法:viewport
http://caibaojian.com/mobile-responsive-example.html
https://www.cnblogs.com/2050/p/3877280.html
1190000008767416#articleHeader7
https://github.com/riskers/blog/issues/18
移動端Web頁面適配方案