• 论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用


    一、先明白几个概念

    phys.

    device-

    一般我们所指的宽度width即为phys.width,而device-width又称为css-width。

    其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px,而css-width为375px。

    二、

    明白一个浏览器默认行为。

    试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机端横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如:safari iphone:980px;

    opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条,而且字迹明显变小的原因。

    三、讲解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

    meta标签中,width有两个含义,第一、width为phys.width,第二,width也为虚拟窗口的width。这样就会有两个结果:

    第一、此时的iPhone6的phys.width也变成了css-width即375px,我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

    第二、如你设计的是375px的手机端页面,此时的虚拟窗口的宽度也为375px,再装进phys.width为375px的手机,当然如设计稿一样的效果,不会缩放,也不会出现横向滚动条。

    四、对响应式布局,媒体查询的影响

    @media only screen and (min- 350px) and (max- 480px){.....................}

    如没有meta标签,此时的width当然即为phys.width,iPhone6就不会执行上边的括号里边的代码,但是有了meta标签以后呢,width变成了css-width,即为375px,,所以是会执行代码的。

    五、论meta标签的影响

    从上边可以看出,有了meta标签以后,原本的iPhone6,即像素比为2的手机,可以按照css-width相同的像素比为1的手机一样正常显示,像素比更高的手机也能正常显示。当然现在andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来说,已经可以不管手机的像素比,只需按照css像素编写代码即可。

    转载自:https://www.cnblogs.com/wbxjiayou/p/5176815.html

  • 相关阅读:
    Ibatis,Spring整合(注解方式注入)
    Amoeba搞定mysql主从读写分离
    ClickjackFilterDeny X-Frame-Options
    Clickjacking: X-Frame-Options header missing
    升级至Struts2 2.5.2
    js和java MD5加密
    Struts2 2.5.2
    Struts2 2.5.2的套路
    java8 集合流式操作
    JS 文本输入框放大镜效果
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/12990029.html
Copyright © 2020-2023  润新知