Front-end-device pixel ratio and viewport

头像
编程码农
    阅读 4 分钟
    中文
    3

    Device pixels and CSS pixels

    device pixels (device pixels) is also called device physical pixel is a specific measurable physical unit.

    CSS pixels are device-independent pixels. This type of pixel is also called (Device-independent pixel), which is the abstract unit of the application. When the application is running, the system will follow the underlying graphics certain proportion (physical device independent pixels and a pixel ratio device) converts the pixel abstract application for devices for physical pixels.

    device physical pixel and device independent pixel ratio, \( dp \) device physical pixel, \( dips \) device independent pixel.

    $$ dpr = \frac{dp}{dips} $$

    px in the CSS layout is a unit relative to the physical pixel. In most browsers, the ratio of the physical pixel to it can be obtained window.devicePixelRatio For example, on the iPhone6, the resolution is 750x1334, its window.devicePixelRatio=2 so its screen width is 375px, with a total of 750 physical pixels, that is, 1px represents two physical pixels.

    The following is the compatibility window.devicePixelRatio

    兼容性

    Viewport

    viewport and <html> in the browser have the same area and can be regarded as the inclusion block of the upper layer of <html> In most mobile devices, the browser is full screen, so the viewport is the size of the entire screen.

    viepwport

    Viewports often need to distinguish layout viewport (layout viewport), visual viewport (visual viewport) and ideal viewport (ideal viewport)

    layout viewport can be regarded as the canvas for CSS layout, visual viewport is the page area currently displayed, ideal viewport is the best presentation of the page on the device.

    布局视口-视觉视口

    The ideal presentation method is the ultimate goal, which can greatly improve the user experience, especially on non-PC devices. The ideal state means:

    • Layout viewport width = visual viewport width = device width.

    If layout viewport width ≠ visual viewport width , the situation is that the content is too wide, and the user may need to zoom to view the content. After zooming out, it looks laborious. After zooming in, you need to slide left and right to view.

    Mobile devices

    The biggest difference between mobile browsers and desktop browsers is that the screen width is much smaller. For many web pages designed for PCs, the display will be messy due to the narrower width.

    Because mobile device browsers believe that they must be able to display all websites normally, including many PC-side websites, all mobile browser manufacturers uniformly set the device’s default layout viewport to 980px.

    兼容性

    For example, on an iphone6 with a width of 375px, a page with a width of 980px is displayed. Most browsers shrink the page in order to display the full page.

    默认

    We can use meta viewport make the browser layout view area equal to the screen width, which is 375px, so the display is the ideal effect.

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

    理想

    The following meta is the most commonly used website we are developing for mobile devices.

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

    The meta tag is to make layout viewport equal to the width of the device, while not allowing the user to manually zoom.

    meta viewport tag was first introduced by Apple in its safari browser to solve the viewport problem of mobile devices. Later, Android and major browser manufacturers followed suit and introduced meta viewport . The facts also proved that this thing is still very useful.

    Here are the resolutions and viewport sizes of some devices:

    equipment Viewport size (width x height) Device resolution (width x height)
    iPhone 12390 x 8441170 x 2532
    iPhone 12 Mini360 x 7801080 x 2340
    iPhone 12 Pro390 x 8441170 x 2532
    iPhone 12 Pro Max428 x 9261248 x 2778
    iPhone SE214 x 379640 x 1136
    iPhone 11 Pro Max414 x 8961242 x 2688
    iPhone 11 Xs Max414 x 8961242 x 2688
    iPhone 11414 x 896828 x 1792
    iPhone 11 Xr414 x 896828 x 1792
    iPhone 11 Pro375 x 8121125 x 2436
    iPhone 11 X375 x 8121125 x 2436
    iPhone 11 Xs375 x 8121125 x 2436
    iPhone X375 x 8121125 x 2436
    iPhone 8 Plus414 x 7361080 x 1920
    iPhone 8375 x 667750 x 1334
    iPhone 7 Plus414 x 7361080 x 1920
    iPhone 7375 x 667750 x 1334
    iPhone 6s Plus414 x 7361080 x 1920
    iPhone 6s375 x 667750 x 1334
    iPhone 6 Plus414 x 7361080 x 1920
    iPhone 6375 x 667750 x 1334
    iPad Pro1024 x 13662048 x 2732
    iPad Third & Fourth Generation768 x 10241536 x 2048
    iPad Air 1 & 2768 x 10241536 x 2048
    iPad Mini768 x 1024768 x 1024
    iPad Mini 2 & 3768 x 10241536 x 2048
    Nexus 6P411 x 7311440 x 2560
    Nexus 5X411 x 7311080 x 1920
    Google Pixel411 x 7311080 x 1920
    Google Pixel XL411 x 7311440 x 2560
    Google Pixel 2411 x 7311080 x 1920
    Google Pixel 2 XL411 x 8231440 x 2880
    Samsung Galaxy Note 5480 x 8531440 x 2560
    LG G5360w x 6401440 x 2560
    LG G4360w x 6401440 x 2560
    LG G3360w x 6401440 x 2560
    One Plus 3480 x 8531080 x 1920
    Samsung Galaxy S9360 x 7401440 x 2960
    Samsung Galaxy S9+360 x 7401440 x 2960
    Samsung Galaxy S8360 x 7401440 x 2960
    Samsung Galaxy S8+360 x 7401440 x 2960
    Samsung Galaxy S7360 x 6401440 x 2560
    Samsung Galaxy S7 Edge360 x 6401440 x 2560
    Nexus 7 (2013)600 x 9601200 x 1920
    Nexus 9768 x 10241536 x 2048
    Samsung Galaxy Tab 10800 x 1280800 x 1280
    Chromebook Pixel1280 x 8502560 x 1700

    https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html?lang=zh

    https://viewportsizes.com

    Some length and width attributes

    screen

    • screen.width : Returns the screen width.
    • screen.height : Returns the height of the screen.
    • screen.availWidth : Returns the available width of the screen. That is, the screen width minus the width of the left and right taskbars can be expressed as the width when the software is maximized.
    • screen.availHeight : Returns the available height of the screen. That is, the height of the screen minus the height of the upper and lower taskbars can be expressed as the height when the software is maximized.

    window

    • window.outerWidth : Returns the width of the browser.
    • window.outerHeight : Returns the height of the browser.
    • window.innerWidth : The available width of the page in the browser, including the width of the vertical scroll bar.
    • window.innerHeight : The available height of the page in the browser, including the height of the horizontal scroll bar.
    • window.pageXOffset : The horizontal scroll offset of the page in the browser.
    • window.pageYOffset : The vertical scroll offset of the page in the browser.

    body

    • document.body.offsetWidth : The total width of the body.
    • document.body.offsetHeight : The total height of the body.
    • document.body.clientWidth : The width of the body display; it represents the width of the area displayed by the body in the browser.
    • document.body.clientHeight : The height of the body display; it represents the height of the area displayed in the browser.

    window

    前端viewportdevicepixelratio
    编程码农
    455 声望1.4k 粉丝

    多年编程老菜鸟👨‍💻🦍

    « 上一篇
    分辨率越高清晰度越高吗？
    下一篇 »
    5分钟掌握布隆过滤器

    引用和评论

    推荐阅读
    头像
    微信公众号的AI时代：使用扣子机器人连接大模型

    编程码农阅读 788

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新