資訊專欄INFORMATION COLUMN
摘要：檢測手機豎屏下，提示用關(guān)閉屏幕旋轉(zhuǎn)鎖定，并橫置手機。想想手機瀏覽器還是豎屏，而內(nèi)容卻被強制橫屏的畫面有多奇怪吧頁面強制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了。文主覺得有些高炮打蚊子。所以自己用實現(xiàn)了一個。
樣式
@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;
}
}
結(jié)構(gòu)
非常多非常多的文字
P.S. 如果你的頁面里有from表單要填的話，應(yīng)該用 「彈出遮罩層讓用戶旋轉(zhuǎn)手機」 的解決方案。檢測手機豎屏下，提示用關(guān)閉屏幕旋轉(zhuǎn)鎖定，并橫置手機。想想手機瀏覽器還是豎屏，而內(nèi)容卻被強制橫屏的畫面有多奇怪吧...
P.S. 頁面強制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了js。文主覺得有些高炮打蚊子。所以自己用Css+Html實現(xiàn)了一個。文章內(nèi)的代碼只是一個給大家發(fā)散思維的littleDemo，你們想豎屏滾動就去掉height加y-auto, 想有背景色就加bg-color，還望大家不要討伐我的不嚴(yán)謹(jǐn)啊。第一篇文章，望海涵。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117543.html
摘要：檢測手機豎屏下，提示用關(guān)閉屏幕旋轉(zhuǎn)鎖定，并橫置手機。想想手機瀏覽器還是豎屏，而內(nèi)容卻被強制橫屏的畫面有多奇怪吧頁面強制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了。文主覺得有些高炮打蚊子。所以自己用實現(xiàn)了一個。 樣式 @media screen and (orientation: portrait) { html{ width : 100vmin; ...
摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標(biāo)不允許點擊平臺字體優(yōu)化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...
摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標(biāo)不允許點擊平臺字體優(yōu)化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...
閱讀 1098·2021-10-14 09:42
閱讀 1391·2021-09-22 15:11
閱讀 3300·2019-08-30 15:56
閱讀 1263·2019-08-30 15:55
閱讀 3640·2019-08-30 15:55
閱讀 901·2019-08-30 15:44
閱讀 2036·2019-08-29 17:17
閱讀 2087·2019-08-29 15:37
