モバイルページ開発の共通知識_html/css_WEB-ITnose-htmlチュートリアル-php.cn

モバイルページ開発の共通知識_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:14

オリジナル

1426 人が閲覧しました

1. head に js コードを直接追加します: viewport タグ

ログイン後にコピー

 <script>        var phoneWidth =  parseInt(window.screen.width);        var phoneScale = phoneWidth/640;        var ua = navigator.userAgent;        if (/Android (\d+\.\d+)/.test(ua)){            document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');        } else {            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi" minimal-ui>');        }    </script>

ログイン後にコピー

minimum-ui: iOS 7.1 の Safari は、Web 接続時にアドレスバーとナビゲーションバーを非表示にする、minimal-ui 属性をメタタグに追加します。ページが読み込まれます。
これらの属性を理解するには、リンクを確認してください:
図に示すように:

以前は、Safari で Web ページを開いた後、次のように見えました:

Apple、常に人間味を強調していますしたがって、iOS 7.1 の Safari では、meta タグに minimum-ui 属性が追加され、Web ページが読み込まれたときに上部のアドレスバーと下部のナビゲーションバーを非表示にすることができます。

実装方法?次のように、ビューポートメタタグの属性に「minimal-ui」を追加するだけです:

しかし、Apple はそれを削除しましたiOS 8 'minimal-ui' では、ページのコンテンツがシステムの UI を制御できないことが考えられます。

2.画面デバイスの回転判定

画面デバイスの回転判定はjsを使ってページの幅と高さの比率を判定していることが分かりましたが、実はCSSでもそのような機能を完成させることができます

<!--屏幕设备旋转判断开始--><div id="orientLayer" class="mod-orient-layer">    <div class="mod-orient-layer__content"><i class="icon mod-orient-layer__icon-orient"></i>        <div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div>    </div></div><!--屏幕设备旋转判断结束-->

ログイン後にコピー

css スタイル:

@-webkit-keyframes rotation {    10% {        transform: rotate(90deg);        -webkit-transform: rotate(90deg)    }    50%, 60% {        transform: rotate(0deg);        -webkit-transform: rotate(0deg)    }    90% {        transform: rotate(90deg);        -webkit-transform: rotate(90deg)    }    100% {        transform: rotate(90deg);        -webkit-transform: rotate(90deg)    }}@keyframes rotation {    10% {        transform: rotate(90deg);        -webkit-transform: rotate(90deg)    }    50%, 60% {        transform: rotate(0deg);        -webkit-transform: rotate(0deg)    }    90% {        transform: rotate(90deg);        -webkit-transform: rotate(90deg)    }    100% {        transform: rotate(90deg);        -webkit-transform: rotate(90deg)    }}#orientLayer {    display: none;}@media screen and (min-aspect-ratio: 13/8) {    #orientLayer {        display: block;        width:100%;        height:100%;    }}.mod-orient-layer {    display: none;    position: fixed;    height: 100%;    width: 100%;    left: 0;    top: 0;    right: 0;    bottom: 0;    background: #333;    z-index: 9997}.mod-orient-layer__content {    position: absolute;    width: 100%;    top: 45%;    margin-top: -75px;    text-align: center}.mod-orient-layer__icon-orient {   background-image: url(../images/icon-orient.png);    display: inline-block;    width: 67px;    height: 109px;    transform: rotate(90deg);    -webkit-transform: rotate(90deg);    -webkit-animation: rotation infinite 1.5s ease-in-out;    animation: rotation infinite 1.5s ease-in-out;    -webkit-background-size: 67px;    background-size: 67px}.mod-orient-layer__desc {    margin-top: 20px;    font-size: 15px;    color: #fff}

ログイン後にコピー

画面が水平の場合、次の効果があります:

は後で追加されます。。。

著者: 嵐の後に虹を見ましょう

出典: http://www.cnblogs.com/moqiutao/

この記事があなたの研究に役立つと思われる場合は、サポートとサポートをお願いします奨励する。