JavaScriptを無効にする縦画面-フロントエンドQ&A-php.cn

JavaScriptを無効にする縦画面

WBOY

リリース： 2023-05-12 11:47:36

オリジナル

644 人が閲覧しました

スマートフォンやタブレットの人気に伴い、モバイル版を設計および開発する Web サイトがますます増えています。モバイルデバイスでは、デスクトップコンピュータとは異なり、ユーザーはデバイスの向き、つまり画面を水平または垂直に自由に調整できますが、これによっても特定の問題が発生します。たとえば、Web サイトを縦向きモードで表示すると、表示されるコンテンツが狭すぎて読みにくく、操作しにくい場合があります。ユーザーが横向きモードに切り替えると、レイアウトの問題によりページの位置がずれたり、表示できなくなったりすることがあります。したがって、一部の開発者は、Web ページに縦画面を無効にする機能を追加して、ページが横モードでのみ表示されるようにしたいと考えています。ここで JavaScript が役に立ちます。

1. JavaScript とは何ですか?

JavaScript は、主にインターネットフロントエンド、つまりブラウザ側のインタラクティブデザインの開発に使用されるスクリプト言語です。 HTML はページの構造とコンテンツ、CSS はページの外観とスタイル、JavaScript はページの機能と動的効果であることが理解できます。 JavaScript で記述されたスクリプトを通じて、ページは確認フォーム、ポップアップボックス、カルーセル画像などの特定の応答と動作を実装できます。

2. 縦画面を無効にするにはどうすればよいですか?

1. CSS スタイルを使用する

簡単な方法は、ページの幅を画面の高さの 100% に設定できる CSS スタイルを使用することです。横向きモードページ全体を縦向きに表示しますが、ページ全体を縦向きに表示することはできません。

<style>
body{
    width:100vh;
    overflow-x:hidden;
}
</style>

ログイン後にコピー

このうち、vh ユニットはビューポートの高さの 1% を表します。このソリューションは、絶対配置の要素と流動的なレイアウト (レスポンシブレイアウト) にのみ適しています。ただし、この方法では実際にデバイスがポートレートモードに切り替わるのを防ぐことはできず、ユーザーはデバイスを回転させることで方向を切り替えることができます。

2. メディアクエリを使用する

もう 1 つの方法は、CSS3 で @media メディアクエリルールを使用することです。条件を設定できます。デバイスの高さがデバイスの幅より小さい場合、ページが常に横向きになるようにコンテンツを自動的に 90 度回転する回転スタイルを追加します。このようにして、ユーザーがデバイスをどのように回転させても、ページは常に横向きモードで表示されます。

@media screen and (orientation: portrait){
    //竖屏模式下的CSS样式
    body{
        transform: rotate(90deg);
        transform-origin: right top; /*定位基点为屏幕右上角*/
        width:100vh;
        overflow-x:hidden;
        position:absolute;
        top:100%; /*将页面定位到屏幕底部*/
        left:0;
    }
}

ログイン後にコピー

この方法では、テキスト、画像、ボタンなどを含むすべてのコンテンツを 90 度回転する必要があることに注意してください。これにより、ページを横向きモードで表示できますが、ページの外観とエクスペリエンスに大きな影響が与えられ、開発およびメンテナンスのプロセスでも多くの不便が生じます。

3. JavaScriptを使用する

上記2つの方法以外に、JavaScriptを使用して縦画面を無効にする方法もあり、端末の向きに応じて自動的に判断して回転させることができます。コードは次のとおりです。

<script>
window.onload=function(){
    var isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
    if(isMobile){
        var el = document.getElementsByTagName('body')[0];
        if(window.orientation == 90 || window.orientation == -90){
            el.style.display = 'none';
            alert('请将设备调回竖屏模式');
        }
        window.addEventListener("orientationchange", function() {
            if(window.orientation == 0 || window.orientation == 180){
                el.style.display = 'none';
                alert('请将设备调为横屏模式');
            }else{
                el.style.display = 'block';
            }
        }, false);
    }
};
</script>

ログイン後にコピー

デバイスの向きを判断して、デバイスが縦モードの場合、ページが非表示になり、ユーザーに元のモードに切り替えるように求めるプロンプトボックスがポップアップ表示されます。横長モード。デバイスの向きを横向きモードに変更すると、ページが再表示されます。

JavaScript を使用して縦画面を無効にする場合は、デバイスの向きの変更イベントを考慮する必要があることに注意してください。ここでは orientationchange イベントを使用します。さらに、デバイスやブラウザごとに userAgent (ユーザーエージェント) が異なる場合があるため、コードの安定性と互換性を確保するには十分なテストと適応が必要です。

3. 概要

CSS スタイル、メディアクエリ、JavaScript のいずれを使用する場合でも、それらは基本的に、縦画面を禁止するという目的を達成するためのページへの操作とスタイルの変更です。ただし、縦画面の禁止自体には多少の議論があり、ユーザーによってはデバイスを自由に回転させる権利が制限され、Web サイトの印象が悪くなる可能性があると考えられます。しかし、いずれの場合でも、ユーザーの選択を尊重し、より良いユーザーエクスペリエンスを備えたページを作成する必要があります。

以上がJavaScriptを無効にする縦画面の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。