Android中用于屏幕方向变化的媒体查询

Question

我有一个网站，它被创建为在Android设备上的Webview中加载，我希望加载的网站能够适应屏幕大小，即页面上没有溢出内容并且不需要滚动条。

当你在竖屏模式下在Webview中加载网站时，一切都很好，即所有的元素都处于正确的位置，图像也以其正确的大小呈现。如果我将其更改为横屏模式，一切仍然很好，它仍然按照与竖屏模式相同的比例缩放和显示视图，只是周围多了一些额外的空间。

然而，如果我首先在横屏模式下加载Webview，似乎我的网站内容会以某种方式变大。因为在横屏模式下，你拥有更多的宽度，现在如果我将手机旋转到纵向模式，它不会重新缩放我的网站内容，所以图片在纵向模式下太大，强制你向右滚动才能看到整张图片。

我试图避免需要手动滚动来查看内容。

这是因为当旋转Webview时，例如从横屏模式到纵向模式时，安卓系统仅仅取横屏模式下的内容并将其放置在纵向模式下而没有尝试重新调整大小吗？

- user1233587

---

你尝试过使用媒体查询吗？它们在安卓Galaxy上可以工作。 - David

我有同样的问题。你解决了吗？ - Ankur Aggarwal

Answer 1

iOS上存在一个类似的bug，旋转设备会导致奇怪的页面缩放问题（详见https://github.com/scottjehl/Device-Bugs/issues/2）。我发现，在iOS上解决这个问题的好方法是更改meta viewport标签。最常见的meta viewport标签（并且与HTML5 Boilerplate一起使用）是：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

然而，通过移除 initial-scale=1.0，可以规避这个 bug（在 iOS 上）：

<meta name="viewport" content="width=device-width">

不确定这个修复方案是否适用于安卓操作系统。

- angus