幽灵资源网 Design By www.bzswh.com
在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过HTML,CSS,JS三种判断方法记录下来,方便以后翻阅。
1、通过在html中分别引用横屏和竖屏的样式:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的CSS <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用横屏的CSS
2、CSS中通过媒体查询的方法来判断:
@media (orientation: portrait ){ //竖屏CSS } @media ( orientation: landscape ){ //横屏CSS }
3、js判断是否为横屏竖屏:
window.addEventListener("onorientationchange" in window " : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { alert('竖屏状态!'); } if (window.orientation === 90 || window.orientation === -90 ){ alert('横屏状态!'); } }, false);
只要用户改变了设备的查看模式,就会触发onorientationchange事件。
orientation有4个值:0,90,-90,180
值为0和180的时候为竖屏(180为倒过来的竖屏);
90和-90时为横屏(-90为倒过来的竖屏模式);
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
标签:
判断,横屏,竖屏
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。