HTML5实战与剖析之判断移动端横屏竖屏功能
博客专区 > haopeng 的博客 > 博客详情
HTML5实战与剖析之判断移动端横屏竖屏功能
haopeng 发表于2年前
HTML5实战与剖析之判断移动端横屏竖屏功能
  • 发表于 2年前
  • 阅读 68
  • 收藏 11
  • 点赞 2
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: HTML5实战与剖析之判断移动端横屏竖屏功能
  用CSS判断横屏竖屏问题。CSS代码如下
    1、
    @media (orientation: portrait) { } 横屏
    @media (orientation: landscape) { }竖屏
    
    2、
    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

 

  JavaScript判断横屏竖屏问题。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,进行执行就可以了。  

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 18
博文 113
码字总数 12725
作品 1
×
haopeng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: