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

RWD and smartphone's screen x browser window size

我正在开发一个采用响应式网页设计 (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 sizeScreen size 大致相同,以便该网站的 "small version" 出现在智能手机上。我该如何实现?

编辑

我添加后

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

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

与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;
}

如果您正在开发网站并且希望它是 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