0

モバイルまたはパッドのユーザーがウェブサイトを垂直または水平に表示して、画像のスケールを切り替えるかどうかを知る必要があります。

例：

ユーザーがページを水平に表示している場合、フルスケールで表示する画像のスタイルは次のようになります

img{width:100%; height:auto;}

ただし、垂直の場合は、css を切り替える必要があります

img{width:auto; height:100%;}

では、jQuery、Javascript、またはメディアクエリでこのようなことを実現するにはどうすればよいでしょうか...など、ユーザーがモバイルまたはiPadでページを閲覧しているビューに応じて適切なスタイルを取ることができますか?

ありがとう

4

2 に答える 2

2

次のような JavaScript を使用して向きを検出できます。

detectOrientation();
    window.onorientationchange = detectOrientation;
    function detectOrientation(){
        if(typeof window.onorientationchange != 'undefined'){
            if ( orientation == 0 ) {
                 //Do Something In Portrait Mode
            }
            else if ( orientation == 90 ) {
                 //Do Something In Landscape Mode
            }
            else if ( orientation == -90 ) {
                 //Do Something In Landscape Mode
            }
            else if ( orientation == 180 ) {
                 //Do Something In Landscape Mode
            }
        }
    }

http://www.devinrolsen.com/javascript-mobile-orientation-detection/から入手

于 2012-09-17T16:02:38.067 に答える
0

特定のブレークポイントでレスポンシブ CSS を使用することはできませんか?

このような種類：

@media screen and (max-width: 123px /* your value */ ) {
  img{width:auto; height:100%;}
}
于 2012-09-17T16:42:46.603 に答える