☰

为什么某些桌面网站在放大到一定百分比时会变成移动模式？

tag-icon • tag-icon google-chrome browser mobile-phone
为什么某些桌面网站在放大到一定百分比时会变成移动模式？

例如，当我去本网站在我的桌面上，将网站放大到 300%，网站似乎变成了移动模式。放大到 300% 左右时会出现一个菜单按钮（Google Chrome 的屏幕分辨率为 1920 x 1080）。

这是激活移动模式或移动网站的方式吗？这是屏幕分辨率吗？

答案1

这是激活移动模式或移动网站的方式吗？这是屏幕分辨率吗？

是的，这就是许多网站调整自身以适应可用空间的方式。

看响应式网页设计

实现此目的的典型方法是在 CSS 中使用以下内容

 /* ======== Styling common to all sized devices ======== */
 ...
 /* ========= Styling for desktops ===================== */
 @media screen and (min-width: 901px) {
 ...
 /* ========= Styling for tablets ===================== */
 @media screen and (min-width: 671px) and (max-width: 900px) {
 ...

大部分 CSS（约占 95%）都位于第一部分，该部分本身适用于手机。后面的部分会覆盖该部分，以重新排列菜单和取消隐藏可选侧边栏等。

因此，如果您将桌面浏览器的窗口大小调整为与手机屏幕相同的大小（以像素为单位），您将会看到相同的针对移动设备优化的网站布局。

现代浏览器在放大时会尽力做“正确的事情”。即使窗口没有改变大小，它们也会放大内容，并且它们认识到这在某种程度上相当于减小窗口大小 - 因此它们会相应地重新解释 CSS。

并非所有网站都能正常工作，许多网站仍尝试检测实际的设备或浏览器并在此基础上做出选择 - 随着新设备和新浏览器的推出，这种方法需要不断维护。

答案2

这取决于网站的编码方式，但通常与“虚拟”分辨率有关 - 即 Web 浏览器在不同缩放级别下的分辨率。因此，1920 x 1080 的 300% 缩放会将其变成 640 x 360 的区域。网页最有可能将此分辨率作为“移动”分辨率 - 因此，它会为您提供移动版本。

相关内容