9

私は現在、すべてのデバイスで比較的同等のWebサイトに取り組んでいます。デスクトップとモバイル。％を使用しているのは、それが最良のオプションだと思うからです。

ポートレートモードに基づいています。デバイスを横向きに変更すると、Webサイト全体が太った小人のように見えます。

だから私は疑問に思っています：ウェブサイトをロックして、常に縦向きで表示する可能性はありますか？

つまり、デバイスの回転がロックされているということです。ランドスケープに行くとき、ウェブサイトはランドスケープにいる間、ポートレートに戻ります。（私はすでにStackOverflowでいくつかのコードを見ました。）

Check my site at: http://prototyping.iscs.nl/mobiel.html

参考のために ：）

前もって感謝します

4

5 に答える 5

15

古い（'12）質問の更新では、これは多くの人々に役立つと思います！

デバイスの回転をロックする本当の方法はわかりませんが、完璧な代替案を思いつきました。これは、数人の人もそうしているのを見てきました。

オプションA.1つの簡単なアラート

簡単なjQueryスクリプトを使用することで、デバイスの向きを検出できます。

if(window.innerHeight > window.innerWidth){
  alert("Please use Landscape!");
}

簡単なアラートは簡単ですが、通知は非常に便利です。

オプションB.1つの素敵な画像通知

（2018年4月現在の更新:(投稿をもう一度見たので、もっと簡単なことを考えました。）メディアクエリを使用します。以下とほぼ同じですが、Javascriptを使用する代わりに、cssを使用し、デフォルトで要素を非表示にします。向きが横向きの場合に表示→@media（向き：横向き）{...}）

fixed向きが変わったときに表示される要素をページに追加するだけです。

HTML 

<div class="turnDeviceNotification"></div>

CSS

.turnDeviceNotification {
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
}

この要素をテキストで更新するか、次の方法で背景画像に接続することができます

.turnDeviceNotification {
  background-image:url('../images/turnDevice.jpg');
  background-size:cover;
}

以下のような素敵な背景を画像フォルダに追加するだけです。

オブジェクトにdisplay: none？があることに気づきました それ以外の場合は、ポートレートモードでも表示されるためです。これで、以下のスクリプトを使用するだけで、オブジェクトは横向きモードでのみ表示されます。

jQuery(window).bind('orientationchange', function(e) {
 switch ( window.orientation ) {
  case 0:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 180:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;

  case -90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;
 }
});

これにより、デバイスの向きが横向きに変更された場合にのみ通知が表示されます。 サンプル画像通知

于 2014-05-26T15:19:44.497 に答える
3

ありえない。ロックの回転はデバイスの設定です。http：//support.apple.com/kb/HT4085 デバイスによってロックされていない場合、ブラウザは回転し、コンテンツはブラウザ内にあるため、コンテンツも回転します。ビューポートが問題の解決に役立つかもしれません：<meta name = "viewport" content = "width =device-width"/>"。そのメタタグが欠落しているようです。

于 2012-11-23T12:40:41.337 に答える
1

可能ではないと思いますが、回避する方法はいくつかあります

jsの方法：window.DeviceOrientationEvent

css方法

@media (orientation: landscape) { body { background-color: black; } }

于 2016-02-20T18:00:23.213 に答える
1 
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

ソース：https ：//css-tricks.com/snippets/css/orientation-lock/

于 2020-06-09T18:50:15.717 に答える
0

現在はご利用いただけません。しかし、その逆は、

CSSを使用すると、メディアクエリは横向きのビューで適切に機能するのに役立ちました。

min-aspect-ratio: 13/9これを指定しない場合と同様に非常に重要です。一部のモバイルデバイスでは、フォームフィールドにフォーカスすると、キーボードが開きます。これにより、ビューポートの高さが基本的に変更され、基本的にランドスケープメディアクエリがトリガーされます。したがって、min-aspect-ratioは、ランドスケープメディアクエリにとって非常に重要です。

@media only screen and (min-width: 320px) and (max-width: 1023px) and (min-aspect-ratio: 13/9) and (orientation: landscape) {
    // Landscape view properties
}

JavaScriptを使用すると、キーボードが表示されても画面の高さが変わらないため、screen.availHeightを使用できます。また、デスクトップビューがフォローできるようにチェックを追加する必要があります。

var currentOrientation = function() {  
  if(screen.availHeight < screen.availWidth){
    // Landscape view
  } else {
    // Portrait view
  }
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
window.addEventListener('resize', currentOrientation);
于 2020-11-25T03:20:57.837 に答える