zoukankan      html  css  js  c++  java
  • 移动端基础

    1.物理像素

    在移动设备上的最小物理显示单元。如,iphone6的物理像素为750*1334。

    2.逻辑像素

    css中逻辑像素px,可以认为是一个“参考像素”。大小不固定,可以放大和缩小。如PC端上的网页放到手机端浏览时,每个px占的空间缩小,从而整个网页缩小。

    2.设备独立像素(dip)

    也叫密度无关像素,跟设备的硬件像素无关的,是设备上的一个逻辑单位像素,在iphone6中,一个dip等于4个物理像素。

    3.设备像素比(dpr)

    是指物理像素与设备独立像素比。如iphone6的物理像素为750*1334,设备独立像素为375*667,设备像素比为2, 相当于一个dip占四个物理像素。

    4.像素密度(ppi)

    每英寸拥有的物理像素的个数,ppi越高,画面越精密。

    5.布局视口与视觉视口

    手机上为了容纳为桌面浏览器设计的网站,默认布局视口宽度远大于屏幕宽度,然后缩小布局视口的网页,在视觉视口上显示网站的全貌,视觉视口是物理屏幕上的可视区域。

    6.viewport

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

    device-width表示设备独立像素的宽度。

    通过width设置布局视口的宽度,布局视口的宽度=屏幕的设备独立像素的宽度=视觉视口的宽度,此时一个css像素对应一个设备逻辑像素。intial-scale=1,表示初始不缩放网页,缩放为1,maxinum-scale表示最大缩放为1,即页面不能放大,user-scalable=no不允许用户手动缩放页面。

    通过上面代码的设置,一个css像素对应一个设备逻辑像素,且布局视口与视觉视口的宽度相同。如iphone6,在375px宽的布局视口上布局网页,在相同宽度的视觉视口显示网页,没有缩放。

  • 相关阅读:
    #include <utility>
    Html的空格显示
    ExtJs自学教程(1):一切从API開始
    天黑的时候,我又想起那首歌
    citrix协议ICA技术原理
    约瑟夫环问题
    数据结构和算法设计专题之---八大内部排序
    HDU
    深入分析C++引用
    八大排序算法总结
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/5610333.html
Copyright © 2011-2022 走看看