非响应式网页设计中笔记本电脑和手机的区别

Question

对于任何无响应的网页设计，让我们说http://www.soe.gr我注意到以下行为：当降低笔记本电脑的分辨率时，例如到800x600或更小的水平滚动条出现。然而，对于相同的分辨率，移动电话使设计适合现有空间而没有任何水平滚动条。小分辨率也是如此。该网站变得越来越小，没有出现水平滚动条。为何如此区别？那有什么解释吗？ 谢谢

Answer 1

在Android的情况下，它取决于包含该网站的WebSettings的{​​{1}}。

可能导致行为的是布局算法 - 请参阅documentation。 如果您致电WebView，该网站应该像桌面或笔记本电脑一样呈现。

Answer 2

移动浏览器将具有Viewport的概念，它将执行以下操作：

1. 如果页面上没有视口 - 则假设该站点是桌面站点，并提供900px的宽视口。 （浏览器可能会根据具有最小宽度的元素来检测所需的宽度等一些聪明的东西）。然后，浏览器将“缩放”，以便您可以看到所有视口
2. 如果有一个视口，那么移动浏览器设置的宽度基于此（设备宽度将使视口与CSS像素中的设备宽度相同或如果它是像素值，那么它的作用与桌面相同但开发人员可以定义900px值）

在桌面上，视口不会影响桌面上的任何内容，因此您将根据内容的宽度进行水平滚动。如果它是一个流畅的布局，那么显然屏幕的宽度会影响UI，但就是这样。