0

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

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

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

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

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

我的标记看起来像这样（这里有一个快速的 jsFiddle 来演示）：

<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欺骗它，让它认为它更小。

有什么建议吗？

4

1 回答 1

0

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

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

如果浏览器设置为“桌面版本”，您将无法避免这种情况，因为它假定更宽的视口，因此您看到的行为。

于 2013-11-13T18:12:58.357 回答