手機(jī)橫屏自適應(yīng)怎么寫

精華

糯康 2016-10-14 01:56:04 瀏覽(5993) 回復(fù)(3) 贊(0)

最近在給自己網(wǎng)站做手機(jī)端頁面的時(shí)候遇到了橫屏自適應(yīng)問題，有點(diǎn)困擾如何能更便捷的讓頁面自動(dòng)適應(yīng)？

標(biāo)簽： html html5 css css3

回答(3)

陳 2016-10-14

CSS：

@media (orientation: portrait) { } 橫屏
@media (orientation: landscape) { }豎屏

 
橫屏
豎屏

JavaScript：

    //判斷手機(jī)橫豎屏狀態(tài)：
function hengshuping(){
  if(window.orientation==180||window.orientation==0){
        alert("豎屏狀態(tài)！")       
   }
if(window.orientation==90||window.orientation==-90){
        alert("橫屏狀態(tài)！")        
    }
 }
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

 
//移動(dòng)端的瀏覽器一般都支持window.orientation這個(gè)參數(shù)，通過這個(gè)參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。
從而根據(jù)實(shí)際需求而執(zhí)行相應(yīng)的程序。通過添加監(jiān)聽事件onorientationchange，進(jìn)行執(zhí)行就可以了。

關(guān)于自適應(yīng)，可以參考：點(diǎn)擊打開鏈接