1. 程式人生 > 其它 >移動端知識小總結

移動端知識小總結

技術標籤:android

1、ppi每英寸的物理畫素點
在這裡插入圖片描述
2、兩倍圖
想在螢幕中顯示一張100100的圖片
先製作一張200-200的圖片
再設定圖片為100
100,這樣高清屏會放大兩倍,這樣會造成模糊效果。這裡的兩倍不是尺寸放大兩倍,而是用兩倍的畫素來顯示。
3、佈局視口 layout viewport
為了PC端的網頁在手機上顯示
4、視覺視口 visual viewport
看到的網站的區域
5、理想視口 ideal viewport
使網站在移動端有最理想的瀏覽和閱讀寬度而設定

設定佈局視口自適應

<meta name="viewport" content="width=device-width">

禁止使用者縮放

user-scalable=no

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

標準的viewport設定

  • 視口寬度和裝置保持一致
  • 視口的預設縮放比例1.0
  • 不允許使用者自行縮放
  • 最大允許的縮放比例1.0
  • 最小允許的縮放比例1.0
<meta name="viewport" content="width=device-width, 
initial-scale=1.0,maximum-scale=1,minimum=1,user-scalable=no"/>