Question

我有一个非常讨厌的问题，我正在尝试制作一个可以在大分辨率和移动设备/平板电脑上很好扩展的网页。

在大屏幕上，我希望事情看起来像这样：

---------------------
|    |    |    |    |
|    |    |    |    |
---------------------

但是在小屏幕上，我希望事情看起来像这样：

---------------------
|                   |  
|                   |
---------------------
---------------------
|                   |  
|                   |
---------------------
---------------------
|                   |  
|                   |
---------------------
---------------------
|                   |  
|                   |
---------------------

我的标记看起来像这样（here's a quick jsFiddle to demonstrate）：

<div class="row">
    <div class="small-12 large-3 columns"></div>
    <div class="small-12 large-3 columns"></div>
    <div class="small-12 large-3 columns"></div>
    <div class="small-12 large-3 columns"></div>
</div>

一切都在PC和iPhone上运行良好，但是当我在Windows Mobile（诺基亚Lumia 820）上尝试时，它认为它很大并且显示前者而不是后者...而且它让我疯了!!

我已经使用了常见的元视口<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">，甚至尝试width=320尝试欺骗它以使其更小。

有什么建议吗？

Answer 1

Windows Phone 8中的Internet Explorer可以配置为桌面或移动浏览器。

转到“设置”并将Website preference设置为“移动版”或“桌面版”。这将影响浏览器的行为方式。

如果浏览器设置为“桌面版”，您将无法避免这种情况，因为它假设了一个更宽的视口，从而假设您正在看到的行为。

当它应该是小12时，显示它认为它是大12

1 个答案: