Question

我正在使用响应式Web设计（RWD）开发一个网站。我决定使用640像素作为移动设备和台式机之间的断点，就像this site一样（在PC上调整浏览器大小时可以看到）。但是，当使用this site测量智能手机的屏幕时，我得到以下属性：

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

以某种方式，浏览器窗口变得比屏幕大得多，并且网站看起来好像在桌面上一样。看来我需要Browser window size与Screen size差不多，以便该网站的“小版本”出现在智能手机上。我该如何实现？

编辑

添加后

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

对于代码，页面在智能手机的浏览器中正确显示。但是，我仍然不明白为什么browsersize.com返回的浏览器窗口大小比屏幕大小大。

Answer 1

这与window.innerWidth和screen.width之间的差异有关。

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

还添加视口元标记将页面的宽度设置为跟随设备的屏幕宽度。

这是https://browsersize.com/用于显示尺寸的功能：

cryptoProvider.GetType().GetMethod("_NewEncryptor", BindingFlags.NonPublic | BindingFlags.Instance);

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并从该文件中选择所需的内容。

browsersize是用于测试具有特定大小的网页的工具，例如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浏览器窗口大小

2 个答案: