1080ピクセル幅のブラウザを搭載したモバイル向けのHTML/CSS

Question

現在、モバイルアプリで作業しており、さまざまな携帯電話でテストが開始されています。アプリはほとんどの携帯電話で動作していますが、Huawei p9でテストしたところ、いくつかの問題が発生しました。電話機のブラウザの幅は1080ピクセル、デフォルトのフォントサイズは16ピクセルです。これは私たちのアプリを非常に大規模にレンダリングさせています。私たちは現在、すべてをコード化するためにビューポートと 'em'を使用しています。このような次元のブラウザをサポートするためにできることはありますか？

Answer 1

@media only screen and (width: 1080px) { 

    font-size: 12px; 

} 

これは動作します。

Answer 2

私はブートストラップを使用しようとします。

小さなデバイスに単純にスタックを積み重ねたくないのですか？あなたの列に.col-xs-* .col-md-*を追加することで、特別な中小機器のグリッドクラスを使用してください。すべての仕組みのより良い考え方については、下の例を参照してください。

<!-- Stack the columns on mobile by making one full-width and the other half-width --> 
<div class="row"> 
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
<div class="row"> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 

<!-- Columns are always 50% wide, on mobile and desktop --> 
<div class="row"> 
    <div class="col-xs-6">.col-xs-6</div> 
    <div class="col-xs-6">.col-xs-6</div> 
</div> 

あなたはそれがhttp://getbootstrap.com/css/