樣式
@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)
<html>
<body>
<div id="gyroContain">
非常多非常多的文字
</div>
</body>
</html>P.S. 如果你的頁(yè)面里有from表單要填的話(huà)，應(yīng)該用 「彈出遮罩層讓用戶(hù)旋轉(zhuǎn)手機(jī)」 的解決方案。檢測(cè)手機(jī)豎屏下，提示用關(guān)閉屏幕旋轉(zhuǎn)鎖定，并橫置手機(jī)。想想手機(jī)瀏覽器還是豎屏，而內(nèi)容卻被強(qiáng)制橫屏的畫(huà)面有多奇怪吧…
P.S. 頁(yè)面強(qiáng)制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了js。文主覺(jué)得有些高炮打蚊子。所以自己用Css+Html實(shí)現(xiàn)了一個(gè)。文章內(nèi)的代碼只是一個(gè)給大家發(fā)散思維的littleDemo，你們想豎屏滾動(dòng)就去掉height加y-auto, 想有背景色就加bg-color，還望大家不要討伐我的不嚴(yán)謹(jǐn)啊。第一篇文章，望海涵。
新聞熱點(diǎn)
疑難解答
圖片精選
