瞬间搞懂pt,px,viewport的关系

本文预计阅读时间:5分钟。

如果你知道,就别看了,这篇文章是新手向。

我刚开始开发前端页面的时候,发现了一个问题,就是在html的header标签里,总会出现这么一行代码:

<meta name="viewport" content="width=device-width, initial-scale=1>

这个viewport的meta标签我感觉很神秘,因为每次加上这个标签以后,我的网页看起来就会有一些不大不小的变化(当我选择手机模式的时候)

你屏幕的分辨率是多少?

换句话问:你屏幕的横向有多少个像素?我的mac pro 是1440px。这个值我可以通过js取得:

var screenWidth = window.screen.width;//1440,肯定是1440

这个值既然是我屏幕的宽度,那么就说明无论我怎么缩放浏览器,这个值都是不变的,请看图。


全屏

不是全屏

你肯定想说,这么简单的事情我当然知道。

那么问题是,你的手机屏幕是多少像素?

好吧,我用的是iPhone6s,我上苹果官网查一下,官网说是750px。


image.png

那么你觉得如果把这个网页放在iPhone6s上运行,screenWidth的值是多少?750px?

如果你真的这么觉得,只能说,你可以感谢我的这篇文章了,让你少爬了一个坑。事实上,显示的值是……375。

image.png

我曹,为什么?

因为在移动设备上,描述宽度用的不是px,而是pt。英文全称是point,就是“点”,可以认为,在手机上,屏幕被划分成了横向375个点。

image.png

浏览器的窗口究竟有多大?

下面这段代码可以获取浏览器窗口的大小,显然,随着浏览器的缩放,这个值是会变化的。

var browserWidth = window.innerWidth;
image.png
image.png

其实浏览器宽度就是他妈的viewport宽度。

这是一些不负责任的博主胡逼翻译造下的孽。viewport,视口。说人话就是:浏览器大小。(如果你也很讨厌那种说来说去不说人话的文章,请给我点个赞)

viewport这个meta标签是干什么的?

首先,这个标签只是针对移动设备。
然后,当你加上这个标签,你的浏览器宽度就可以自由设置了。
通常来说,会利用这个标签,将手机浏览器的宽度设置为手机屏幕的宽度,以6s为例子,就是讲浏览器宽度设置为375pt。


image.png

这个时候,我画一个宽度为375px的方块,就会正好填满手机屏幕

image.png

可是不会填满电脑的浏览器

image.png

所以,电脑端的1px对应着手机端的1pt,每个手机的pt都是手机厂商给指定好的,比如小米4是360,iPhoneX是375,iPad是768,等等……

如果不加上viewport的标签,手机端的浏览器像素是多少?

如果你想实验的话可以自己试试,我可以告诉你我的结果:iPhone6s浏览器会显示:980像素。因为viewport的默认值是手机safari出厂时候设定好的。如果感兴趣的话可以去各个手机厂商的官网找一找,他们默认的设置是多少。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 5,415评论 0 4
  • (转自:http://blog.csdn.net/tengdazhang770960436/article/det...
    一个废人阅读 4,014评论 0 1
  • 开发移动网页时,你一定会遇到下面这段代码: 在网页的 中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其...
    gzgogo阅读 6,723评论 4 16
  • 2018.2.17 1、感激团宝的乐观! 2、感激团宝准点起床! 3、感激婆婆的理解! 4、感激魏先生一丝的关照!...
    老姐嘛嘛阅读 793评论 0 0
  • 9月25日,那是慕子衿最落魄的一天,但也是她最幸福的一天。那一天……慕子衿眯了眯,嗯…好像是一个雨天。 那一天,爸...
    萌萌的叶子阅读 2,444评论 0 0