2016-12-10 2 views
1

ランドスケープモードのiPhone6 PlusとメディアクエリのBootstrap3で奇妙な問題が発生しました。基本的には、PortraitモードでタブレットのiPadのように動作させるために、iPhone6とLandscapeモードで十分なスペースがあります。iPhone6 PlusのランドスケープモードをBootstrap3でうまく動作させる方法

iPhone6 Plusのランドスケープモードのピクセル幅は736pxです。 iPadポートレートモードのピクセル幅は768pxです。

Bootstrap3でグリッドスタイリングを実行しようとすると、col-sm- *は750px以上でしか動作しません。そのため、iPadのポートレートモードをキャプチャして、そのクラスでうまく動作させることができます。ただし、iPhone6 Plusのランドスケープモードではうまく機能しません。

col-sm- * CSSクラスが736px以上で動作するように、どのようにしてブートストラップ3をオーバーライドして、コンテナとコンテナの両方の流体幅とカラム幅を固定できますか?最終目標は、iPhone6 PlusのランドスケープモードがiPadのポートレートモードのように機能するようにすることです。

+0

[カスタムブートストラップテンプレート](https://stackoverflow.com/questions/41072323/how-to-make-iphone6-plus-landscape-mode-work-better-with)を生成することで、これをよりエレガントに修正しようとしました。 -bootstrap3)をSMと730pxに設定しましたが、これはうまくいきませんでしたが、対象となるメディアクエリの下にはまだ行く方法があります。 –

答えて

0

誰かがより良い答えを考え出すことができない限り、私がしなければならないのは、ランドスケープモードのiPhone6 Plusだけのメディアクエリを作成し、問題を修正することです。

/* iPhone6 Plus Landscape Mode Fixes */ 
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { 
/* FIXES GO HERE */ 
} 

より望ましい答えはおそらく、* .container、.container流体、および.COL-SM-を調整することであろう。

関連する問題