RWD 和智能手机的屏幕 x 浏览器 window 大小

Question

我正在开发一个采用响应式网页设计 (RWD) 的网站。我决定使用 640 像素作为移动和桌面之间的断点，因为 this site appears to do (as can be seen when resizing the browser on PC). However, when using this site 在我的智能手机中测量屏幕，我得到以下属性：

Browser window size: 980 x 1392
Screen size: 360 x 640

不知何故，浏览器 window 变得比屏幕大得多，网站看起来就像在桌面上一样。看来我需要 Browser window size 与 Screen size 大致相同，以便该网站的 "small version" 出现在智能手机上。我该如何实现？

编辑

我添加后

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

根据代码，页面正确显示在智能手机的浏览器中。但是，我仍然不明白为什么 browsersize.com returns 浏览器 window 尺寸比屏幕尺寸大。

Answer 1

与window.innerWidth和screen.width的区别有关。

window.innerWidth 给出 window 的物理像素（window 的内部宽度或更准确地说是视口），其中包括滚动条
screen.width 给出屏幕的逻辑 (CSS pixels)（不仅仅是浏览器 window）

同时添加视口元标记设置页面宽度以符合设备的屏幕宽度。

这是 https://browsersize.com/ 用来显示尺码的函数：

function updateSizes() {

    var uniwin = {
        width: window.innerWidth || document.documentElement.clientWidth
            || document.body.offsetWidth,
        height: window.innerHeight || document.documentElement.clientHeight
            || document.body.offsetHeight
    };

    $("info_sw").innerHTML = screen.width;
    $("info_sh").innerHTML = screen.height;
    $("info_ww").innerHTML = uniwin.width;
    $("info_wh").innerHTML = uniwin.height;
}

Answer 2

如果您正在开发网站并且希望它是 RWD，您应该覆盖大部分屏幕，例如台式机、平板电脑和手机，因此 bootstrap media queries 可能是您网站的不错选择，但是如果您决定使用 640 像素作为移动设备和桌面设备之间的断点！那么其他屏幕尺寸呢，你可能需要一些东西，比如下面的代码来覆盖大部分屏幕。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

但是如果您正在寻找特定的屏幕尺寸，您可以使用此 link 和 select 您需要的那个文件。

browsersize is tools for testing your web pages with specific size like chrome inspect element responsive 工具。

但是 viewport 可以快速解决您的问题。

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

<meta> 视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

width=device-width 部分设置页面宽度以符合设备的屏幕宽度（这将因设备而异）。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。 reference

RWD 和智能手机的屏幕 x 浏览器 window 大小

RWD and smartphone's screen x browser window size

css

responsive-design

smartphone

screen-size