Javascript 判断网页横竖屏
本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/
Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切换依然还是影响用户体验的一个重点(在网页中,竖屏的用户体验显然是高于横屏的)。
使用 orientation 判断横竖屏
我们可以通过 JS 的 window.orientation 来判断当前网页窗口的方向
<script type="text/javascript">
function testOrientation() {
if (window.orientation == 90 || window.orientation == -90) {
alert('现在是横屏, 请切换到竖屏以获得最佳浏览体验!');
}
else if(window.orientation == 180 || window.orientation == 0) {
alert('现在是竖屏, 浏览效果最佳!');
}
}
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', testOrientation, false);
</script>
这样的话,当用户切换到横屏的时候,我们就可以,提示用户切换回竖屏,更好的浏览网页。
Javascript 判断网页横竖屏的更多相关文章
- zepto判断手机横竖屏
var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...
- 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(" ...
- 用JavaScript判断横屏竖屏问题
判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...
- JavaScript判断横屏/竖屏
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS3(@media)判断手机横竖屏
@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...
- 用Javascript开发网页截屏插件
实现思路用html2canvas.js将元素转换成canvas,在将canvas转成图片. html2canvas(document.body, { onrendered: function(canv ...
- 使用JavaScript判断手机是处于横屏还是竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态.从而根据实际需求而执行相应的程序.通过添加监听事件onorientationch ...
随机推荐
- JZYZOJ 1375 双亲数 莫比乌斯反演
http://172.20.6.3/Problem_Show.asp?id=1375 网上搜推理图. 有一段没有写莫比乌斯反演都快忘了..数学能力--,定理完全不会推,但是这道题整体来说应该是比较好写 ...
- 【状压DP】BZOJ2734-[HNOI2012]集合选数
已经八月份了药丸,开始肝作业并且准备高考啦!! [题目大意] <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集 ...
- 【线段树】HDU1754-I hate it
单点修改,区间最值的标程,没什么好说的. #include<iostream> #include<cstdio> #include<cstring> #includ ...
- .net设置中GridView自适应列宽
有一个项目只有30分钟开发时间,速成,使用了古老的.net gridview. 但需要列宽自适应好看些. 于是琢磨了,实现思路如下. 先看下大致效果(很粗暴没有优化) 代码如下: protected ...
- Eclipse环境安装C/C++插件CDT和Eclipse安装的插件卸载(删除)
http://blog.csdn.net/typa01_kk/article/details/49252513
- Visio显示不完整
下面显示不完整的话,选中对象,菜单栏设置(点击对象,右键并没有段落选项)行距为单倍:右侧显示不完整,选中后右键设置环绕方式为负于文字上方,原来是嵌入型.
- (判断url文件大小)关于inputStream.available()方法获取下载文件的总大小
转自:http://hold-on.iteye.com/blog/1017449 如果用inputStream对象的available()方法获取流中可读取的数据大小,通常我们调用这个函数是在下载文件 ...
- XenApp应用虚拟化介绍
https://wenku.baidu.com/view/635223c26137ee06eff91864.html
- C++中try_catch_throw的做异常处理
C++中try_catch_throw的做异常处理 选择异常处理的编程方法的具体原因如下: . 把错误处理和真正的工作分开来: . 代码更易组织,更清晰,复杂的工作任务更容易实现: . 毫无疑问,更安 ...
- Sense编辑器(Sense Editor)
Sense编辑器(Sense Editor) 学习了:https://blog.csdn.net/AbnerGong/article/details/50776605 Sense是一个方便的控制台,用 ...