zoukankan      html  css  js  c++  java
  • 移动端viewport解惑

    我们在做移动端webapp的时候需要设置这么一段:

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

    再配合媒体查询@media就可以写出适配各种手机端的页面了。但是,为什么就能够了呢?

    网上查了很多资料,反复看了很多遍还是似懂非,知道看了知乎中一个问题的解答,茅塞顿开。

    自己不明白三个点,其中viewport,width,device-width分别代表什么?

    viewport浏览器的窗口,显示网页内容的区域。width指这个viewport即浏览器窗口宽度。

    device-width设备独立像素,逻辑像素。听着很抽象,那就按照字面理解,设备的宽度,这个宽度就是我们css常写px概念是一样的。如电脑端的屏幕px宽度,手机的屏幕px宽度。它并不指像英寸,厘米这样的物理尺寸。这些都是手机厂商设的,出厂就设定了。之前一直有误区把device-width和物理尺寸对应起来,所以一直想不明白。

    chrome:f12可以看到device-width

              

    下面就简单说说下自己对下面代码的理解。

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

    我们电脑上网一般都是全屏查看网页,这个全屏就是电脑的屏幕,电脑浏览器窗口=电脑屏幕区域。即viewport=device-width。但是手机浏览器窗口>手机屏幕区域。

    以前手机浏览一些网页都要通过手指调整查看内容的区域。这样用户体验就不好。为了改善这样情况,手机手机厂家就给我想出了解决办法:

    name="viewport" content="width=device-width

    这个设置意思就指让手机浏览器的窗口等于手机屏幕大小。这样一来在手机上查看就跟我们在电脑上全屏看网页一样啦。

    我们做手机端的网页宽度就是根据这个device-width写的。

    见:https://www.cnblogs.com/tu-0718/p/9596894.html#undefined

    网上看了很多资料,给的概念太多,建议看以下几篇文章就差不多了,不懂得多看多想就通。

    https://www.jianshu.com/p/fb982ea8dce3

    https://www.jianshu.com/p/bb76c606f0b4

    https://www.zhihu.com/question/28082877

  • 相关阅读:
    [转]关于ORA00979 不是 GROUP BY 表达式错误的解释
    【转】mongodb简介及源码编译安装mongo2.0.0服务器
    mysql 缓存(转)
    iostat命令详解(转)
    C++虚函数,纯虚函数,抽象基类,虚基类(转)
    C++虚类的作用(转)
    C++ 纯虚类(转)
    虚函数的应用特性(转)
    2、Linux多线程,线程的分离与结合(转)
    mongodb js shell不能使用退格键的问题(转)
  • 原文地址:https://www.cnblogs.com/qiu-freedom/p/10555968.html
Copyright © 2011-2022 走看看