zoukankan      html  css  js  c++  java
  • viewport、像素、分辨率

    移动端web所遇屏幕适配问题:

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

    //这一行代码告诉浏览器,布局视口的宽度应该与理想视口的宽度一致,可以让网页的宽度自动适应手机屏幕的宽度,利用浏览器自身缩放完成适配

    作用:该meta标签的作用是让当前viewport(设备独立像素layout viewport)的宽度等于设备的宽度(设备物理像素),同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport(浏览器默认的layout viewport),也就是说会出现横向滚动条。

    详解如下: 

    【viewport】
     
    需知概念:视觉视窗、布局视窗、理想视窗
    【visual viewport】(视觉视窗) ,代表浏览器可视区域的大小,宽度可以通过window.innerWidth 来获取
    【layout viewport】(布局视窗) ,一个较宽的值,宽度可以通过 document.documentElement.clientWidth 来获取
    【ideal viewport】(理想视窗),不需要用户缩放和横向滚动条就能正常的查看网站的所有内容的宽度, ideal viewport的宽度 = 屏幕的逻辑像素宽度
     
     

    【像素】
     
    需知概念:设备独立像素,设备物理像素、css像素
    【设备独立像素】
    【设备物理像素】
    【css像素】
     
    CSS像素 =设备独立像素 = 逻辑像素
    设备像素 =设备物理像素 = 物理像素
     
    相关参考:
    什么是viewport,为啥需要viewport
    http://www.myexception.cn/mobile/428756.html
  • 相关阅读:
    【Codechef】Chef and Bike(二维多项式插值)
    USACO 完结的一些感想
    USACO 6.5 Checker Challenge
    USACO 6.5 The Clocks
    USACO 6.5 Betsy's Tour (插头dp)
    USACO 6.5 Closed Fences
    USACO 6.4 Electric Fences
    USACO 6.5 All Latin Squares
    USACO 6.4 The Primes
    USACO 6.4 Wisconsin Squares
  • 原文地址:https://www.cnblogs.com/whya/p/5866860.html
Copyright © 2011-2022 走看看