0

私は本当に厄介な問題を抱えています.私は、大きな解像度とモバイルデバイス/タブレット全体でうまくスケーリングするWebページを作成しようとしています.

大画面では、次のように表示されます。

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

しかし、小さな画面では、次のように表示したい:

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

私のマークアップは次のようになります (これは簡単な 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 (Nokia Lumia 820) で試してみると、サイズが大きく、後者ではなく前者が表示されているように見えて、頭がおかしくなりました!!

私は通常のメタ ビューポートを配置し、それをだまして小さいと思わせること<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">さえ試みました。width=320

何かアドバイス？

4

1 に答える 1