注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

CSS:不转不转!就是这样倔强的BOY  

2016-06-11 00:03:16|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
咳咳,是不会随手机旋转翻转的网页BODY

一年多前和同事简略聊过,能否锁住网页的方向不随手机的方向而翻转(竖屏、横屏)。当时的结论是 手机的方向传感器硬件底层不由上层的浏览器来逆向控制没办法。

不是绝对没办法。我们没有办法去改变手机方向,我们可以改变网页的方向啊

页面添加这段js (以下页面需要jquery ,在chrome/safari中有效)

addEventListener('load', function(){
window.onorientationchange = function(){

//alert("screen-width: " + screen.width + "; screen-height:" + screen.height);
switch(window.orientation) {
case 0:
$("body").css({"-webkit-transform":"rotate(0deg)"});
break;
default:
alert("竖起屏幕以达到最佳浏览效果。");
$("body").css({
"-webkit-transform":"rotate("+(-window.orientation)+"deg)"
});
break;
}
};
});


尽管手机屏幕翻转后会带来标题栏布局的改变,屏幕网页显示趋于的长/宽数值已变,而且相对地整体CSS布局会需要诸多调整。
但是...这样我们已经踏出第一步,让<body>倔犟地向着一个方向不变了,对吧。

P.S. 我不是程序员,你妹的程序员,你才程序员,你全家程序员!!
  评论这张
 
阅读(185)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018