码迷,mamicode.com
首页 > 其他好文 > 详细

viewport大白话

时间:2018-03-11 19:30:08      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:content   手机   物理   dev   max   AC   一个   一半   设备   

以下所有内容均是我自己理解的,可能有误,懂得大佬希望指点一下我。。

 

首先,写一个简单的页面。里面只有1个200*200的div

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {
                background-color: red;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>

    <body>
        <div>
            123
        </div>

    </body>
</html>

  把他们在电脑上和在iphone8上看,会发现,同样是200px的css像素单位,竟然不一样大???原来css像素单位其实是个抽象的概念,真的显示靠的是终端设备的物理像素。

     

    这里先引入一个概念叫dpr,dpr=物理像素/设备无关像素,设备无关像素对于web而言就是css像素。

   

    如果说本来屏幕够大的电脑,1px的css像素就对应了1px的物理像素。但是对于移动端设备就不行啊,屏幕太小了,你稍微设一个div大点,一般的手机估计就要启动移动条了。

 那怎么办?为了让我们的移动端手机把这么大的电面页面放进去,这里就要用到上面说的dpr了。比如说dpr为2的iphone 6,1px的css 就等于 2px的物理像素。

    记住,物理像素可以被认为是物理元件,就当它是很小很小的显示屏。手机上的1px物理像素肯定做的比电脑上要小点。我们在为页面写上css以后,把他们放在电脑上和手机上看,差别就

出来了。电脑上一比一的显示,手机上,如果是dpr等于2的话,1px的css长度,就等于0.5倍的css长度。所以看上去就小了!!!

   那问题就来了!!!这么小,我看不清楚啊!!!ok,那既然1px的css长度看上去好像缩小了一半,那想变大点的话,你就设置2px的css,这样看上去就像电脑上的1px一样了。字体也是一样的道理。

 

   另外还有一种解决办法,用meta的viewport,我们经常会看到head里加这么一段代码:

 1 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> 

    这样写完之后,大小竟然和电脑上显示的完全一致????什么鬼呢???我感觉了一下,就像我们按住ctr和+的组合键,放大着看了一样。

    其实这个scale = 1/dpr。 物理像素是物理元件,是不可能变化了,那只能是css像素缩放了,反正他只是个抽象的概念嘛!!!

    好!其实内容已经介绍完了,我们拿ip6为例,本来dpr=2的,scale = 1/dpr = 1/2 = 0.5的,但是你强行写成了1,这样就相当于你把原本200px的css像素,放大成了400px的css像素。这样不就电脑和

手机上显示一样了吗!!!

   如果你在别的地方,看乱七八糟一大堆介绍viewport的概念的,什么理想的viewport,布局的viewport,视觉的viewport这种觉得很烦的话,你就记住物理像素是物理元件,改变不了的!!想缩放,就只能

去改变css大小!!!,我们在meta里设置viewport就是缩放css大小!!!

 

 

 

  

    

 

viewport大白话

标签:content   手机   物理   dev   max   AC   一个   一半   设备   

原文地址:https://www.cnblogs.com/huenchao/p/8544770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!