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

  • 相关阅读:
    Python高级网络编程系列之第二篇
    Python高级网络编程系列之第一篇
    Python高级网络编程系列之基础篇
    利用Python实现12306爬虫--查票
    Linux Shell脚本欣赏
    Linux Shell脚本 之 条件判断
    VMware Workstation虚拟网络VMnet0、VMnet1、VMnet8的图解
    Linux的虚拟机采用NAT方式时如何能在虚拟机中访问互联网
    Linux的虚拟机拷贝到另外的操作系统时,NAT方式的静态IP无效,一直是获取的DHCP动态地址
    Hadoop
  • 原文地址:https://www.cnblogs.com/qiu-freedom/p/10555968.html
Copyright © 2011-2022 走看看