DevicepixelsandCSSpixels设备像素（devicepixels），也叫设备物理像素，是一个特定的、可测量的物理单位。CSS像素是device-independentpixels，也叫device-independentpixels，是应用程序的抽象单位。应用程序运行时，底层图形系统将应用程序的抽象像素按一定比例（设备物理像素与设备独立像素比）转换为适合设备的物理像素。设备物理像素与设备独立像素的比率，\(dp\)设备物理像素，\(dips\)设备独立像素。$$dpr=\frac{dp}{dips}$$CSS布局中的px是相对于物理像素的单位。在大多数浏览器中，可以通过window.devicePixelRatio获取物理像素与其的比例。比如iPhone6，分辨率是750x1334，它的window.devicePixelRatio=2，所以它的屏幕宽度是375px，一共有750个物理像素，也就是1px代表两个物理像素。下面是用于浏览器兼容性的window.devicePixelRatio。视口（Viewport）浏览器中的视口与区域相同，可以看作是之上的包含块。在大多数移动设备中，浏览器是全屏的，因此视口就是整个屏幕的大小。在视口中，往往需要区分布局视口、视觉视口和理想视口。布局视口可以看作是CSS布局的画布，视觉视口就是当前显示的页面区域，理想的视口是页面在设备上的最佳呈现。理想的呈现方式是最终目标，可以大大改善用户体验，尤其是在非PC设备上。理想状态是指：layoutviewportwidth=visualviewportwidth=devicewidth。如果布局视口的宽度≠视觉视口的宽度，则属于内容太宽，用户可能需要缩放才能查看内容。缩小后看起来很难，放大后需要左右滑动才能查看。移动设备上的移动浏览器和桌面浏览器最大的区别是屏幕宽度要小得多。很多为PC设计的网页，由于宽度变窄，会导致显示混乱。因为移动设备浏览器认为必须能够正常显示所有网站，包括很多PC端网站，所以所有移动浏览器厂商统一将设备的默认布局视口设置为980px。比如一个宽度为980px的页面显示在宽度为375px的iphone6上，大多数浏览器为了让页面变满，都会将页面缩小。我们可以使用metaviewport让浏览器布局视图区域等于屏幕宽度，也就是375px，这样显示比较理想。下面的meta是我们开发移动设备网站时最常用的。这个meta标签的作用是让当前布局的宽度视口等于设备，同时不允许用户手动缩放。metaviewport标签最早由Apple在其safari浏览器中引入，用于解决移动设备的视口问题。后来Android和各大浏览器厂商也纷纷效仿，推出了对metaviewport的支持。事实也证明，这东西还是很有用的。以下是一些设备分辨率和视口尺寸：设备视口尺寸(WxH)设备分辨率(WxH)iPhone12390x8441170x2532iPhone12Mini360x7801080x2340iPhone12Pro390x8441170x2532iPhone12ProMax4128x922724xPhone379640x1136iPhone11ProMax414x8961242x2688iPhone11XsMax414x8961242x2688iPhone11414x896828x1792iPhone11Xr414x896828x1792iPhone11Pro375x8121125x2436iPhone11X375x8121125x2436iPhone11Xs375x8121125x2436iPhoneX375x8121125x2436iPhone8Plus414x7361080x1920iPhone8375x667750x1334iPhone7Plus414x7361080x1920iPhone7375x667750x1334iPhone6sPlus414x7361080x1920iPhone6s375x667750x1334iPhone6Plus414x7361080x1920iPhone6375x667750x1334iPadPro1024x13662048x2732iPad第三和第四一代768x10241536x2048ipadair1＆2768x10241536x2048ipadmini768x1024768x1024ipadmini2＆3768x10241536谷歌Pixel411x7311080x1920googlepixelxl411x7311440x2560googlepixel2411x7311080x1920googlepixel2xl411x8231440x2880SAMSUNGGALAXY注意wx6401440x2560OnePlus3480x8531080x1920SamsungGalaxyS9360x7401440x2960SamsungGalaxyS9+360x7401440x2960SamsungGalaxyS8360x7401440x2960SamsungGalaxyS8+360x7401440x2960SamsungGalaxyS7360x6401440x2560SamsungGalaxyS7Edge360x6401440x2560Nexus7(2013)600x9601200x1920Nexus9768x10241536x2048SamsungGalaxyTab10800x1280800x1280ChromebookPixel1280x8502560x1700https://experienceleague.adob...https://viewportsizes.com一些长宽属性screenscreen.width：返回屏幕宽度screen.height：返回屏幕高度。screen.availWidth：返回屏幕的可用宽度。即屏幕宽度减去左右任务栏，可以表示为软件最大化时的宽度。screen.availHeight：返回屏幕的可用高度。即屏幕高度减去上下任务栏的高度可以表示为软件最大化时的高度。windowwindow.outerWidth：返回浏览器宽度。window.outerHeight：返回浏览器的高度。window.innerWidth：页面在浏览器中的可用宽度，包括垂直滚动条的宽度。window.innerHeight：页面在浏览器中的可用高度，包括水平滚动条的高度。window.pageXOffset：页面在浏览器中的水平滚动偏移量。window.pageYOffset：页面在浏览器中的垂直滚动偏移量。bodydocument.body.offsetWidth：正文的总宽度。document.body.offsetHeight：正文的总高度。document.body.clientWidth：body显示的宽度；它表示body在浏览器中显示的区域的宽度。document.body.clientHeight：body显示的高度；body在浏览器中显示区域的高度。
