<ul id="smyk8"></ul>

<strike id="smyk8"></strike>

<tfoot id="smyk8"></tfoot>

Css實現手機端頁面強制橫屏

lieeps 發布于2019-08-30 15:56 / 3284人閱讀

摘要：檢測手機豎屏下，提示用關閉屏幕旋轉鎖定，并橫置手機。想想手機瀏覽器還是豎屏，而內容卻被強制橫屏的畫面有多奇怪吧頁面強制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了。文主覺得有些高炮打蚊子。所以自己用實現了一個。

樣式

@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
  }
@media screen and (orientation: landscape) {
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
    }
}

結構


    
        
            非常多非常多的文字

P.S. 如果你的頁面里有from表單要填的話，應該用「彈出遮罩層讓用戶旋轉手機」的解決方案。檢測手機豎屏下，提示用關閉屏幕旋轉鎖定，并橫置手機。想想手機瀏覽器還是豎屏，而內容卻被強制橫屏的畫面有多奇怪吧...

P.S. 頁面強制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了js。文主覺得有些高炮打蚊子。所以自己用Css+Html實現了一個。文章內的代碼只是一個給大家發散思維的littleDemo，你們想豎屏滾動就去掉height加y-auto, 想有背景色就加bg-color，還望大家不要討伐我的不嚴謹啊。第一篇文章，望海涵。

強制 html5橫屏手機端頁面html html實現手機端移動端橫屏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117543.html

Css實現手機端頁面強制橫屏

摘要：檢測手機豎屏下，提示用關閉屏幕旋轉鎖定，并橫置手機。想想手機瀏覽器還是豎屏，而內容卻被強制橫屏的畫面有多奇怪吧頁面強制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了。文主覺得有些高炮打蚊子。所以自己用實現了一個。樣式 @media screen and (orientation: portrait) { html{ width : 100vmin; ...

graf 2019-08-02 14:33 評論0 收藏0
CSS常用代碼

摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標不允許點擊平臺字體優化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...

Eirunye 2019-08-19 17:09 評論0 收藏0
CSS常用代碼

摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標不允許點擊平臺字體優化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...

ddongjian0000 2019-08-28 18:25 評論0 收藏0
CSS常用代碼

摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標不允許點擊平臺字體優化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...

Java_oldboy 2019-08-01 14:56 評論0 收藏0