话题 首页 > HTML5 教程 > HTML5 教程话题列表 > 详情

手机横屏自适应怎么写

精华
糯康 2016-10-14 01:56:04 浏览(5228) 回复(3) 赞(0)
最近在给自己网站做手机端页面的时候遇到了横屏自适应问题,有点困扰如何能更便捷的让页面自动适应?
html html5 css css3

回答(3)

2016-10-14

CSS:

@media (orientation: portrait) { } 横屏
@media (orientation: landscape) { }竖屏

 
横屏
竖屏

JavaScript:

    //判断手机横竖屏状态:
function hengshuping(){
  if(window.orientation==180||window.orientation==0){
        alert("竖屏状态!")       
   }
if(window.orientation==90||window.orientation==-90){
        alert("横屏状态!")        
    }
 }
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

 
//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange,进行执行就可以了。

关于自适应,可以参考: 点击打开链接

一笔荒芜 2018-05-31

大神在哪里呀,大神在哪里呀,大神在哪里呀.

1144100656 2018-05-31

有问题找度娘,大佬太少,问题不好解决!!!!!

要回复,请先登录 或者注册