为移动设备制作前端页面，经常会遇到很多乱七八糟的情况。在这篇文章中，我整理了一些相关的概念和方法，分享给大家。设备像素和CSS像素css像素是固定的。如果浏览器缩放，CSS像素将被拉伸或缩小，设备像素将保持100%不变。屏幕大小和窗口大小以像素为单位进行缩放。screensize和windowsize很容易理解，但是需要注意的是，当窗口缩放时，窗口大小会发生变化，这有助于后面理解移动端的大小。解释：当页面放大时，窗口变小，为什么？因为窗口大小（window.innerWidth）定义为窗口中可以显示的像素的宽度和高度，页面放大了，页面中显示的CSS像素减少了，所以窗口大小变小了。相反，当页面缩小时，窗口尺寸变小。大的。PC上的viewport视口不是移动端的专利。视口是浏览器内部的一段数据，它约束了html的宽度。视口基本上等同于窗口大小，所以当你缩放窗口时视口会改变，相应的html宽度也会改变。本例中，由于页面放大，viewport变小，页面头部蓝色条的css设置为100%，随viewport变化，所以右边的logo露出来了,而蓝色条并没有覆盖100%的文档宽度，而只是取视口的宽度。移动端的viewport移动端的viewport比较麻烦。视口有两种，分别是显示视口（visualviewport）和布局视口（layoutviewport）。上图可以这样理解：手机是一个放大镜，它在页面上行走，手机上显示的宽高是visual-viewport，整个页面的宽高是layout-viewport.好奇的朋友肯定会问，为什么会这样，何必呢？这是因为手机的尺寸太小了。“手机浏览器厂商希望给他们的客户提供最好的体验，现在指的是“尽可能多地使用桌面”。所以一些技巧是必要的。“所以，如果我的页面没有经过任何优化，那么多大是手机默认布局视口？”布局视口有多宽？每个浏览器都不一样。SafariiPhone为980px，Opera为850px，AndroidWebKit为800px，***IE为974px。"这就是为什么一个普通的页面在iphone上看会变得很大。iphone默认把你页面的viewport设置为980px，也就是说html的100%宽度默认为980px；#p#modernmobile网页设计与视口虽然visual-viewport是为了让用户看得更清楚而设置的，但实际上带来了用户体验的下降，用户经常需要缩放和移动页面。因此，现代移动端网页设计（或响应式）设计）通常的做法是简化页面内容，放大视觉元素，避免页面缩放和移动，体验不好首先要保证的是layout-viewport是visual-viewport，用来消除两个viewport造成的页面差异，Apple推出的viewportmeta可以解决这个问题，viewport的主要作用是指定layout-size的视口。例如：
