css3完美解决手机横竖屏判断,让用户看邀请函更爽

html:

<div id="cover1"></div>

<p id="cover1w">亲,请竖屏观看本屏内容,谢谢^_^</p>

css:

/* 判断手机横竖屏  */

@media screen and (orientation:portrait) {

/*  css[竖向定义样式]  */

#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

@media screen and (orientation:landscape) {

/*   css[横向定义样式]  */

#cover1{display: block;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: block;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

/* PC客户端或大屏幕设备: 1280px 至更大 */

@media only screen and (min-width: 1280px) {

#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

其他参考解决方案:

当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:

0 - 竖屏

90 - 逆时针旋转横屏

-90 - 顺时针旋转横屏

180 - 竖屏,上下颠倒

如果你不希望用户使用横屏方式查看你的网页,你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。

移动设备上的页面,当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听:

<body onorientationchange="updateOrientation();">

js解决方案

今天这里我们分享一个jQuery的代码,能够有效帮助大家判断横屏或者竖屏。注意这里调用了jQuery的方法,所以你需要引用jQuery类库。function orient() {

alert(‘gete‘);

if (window.orientation == 0 || window.orientation == 180) {

$("body").attr("class", "portrait");

orientation = ‘portrait‘;

return false;

}

else if (window.orientation == 90 || window.orientation == -90) {

$("body").attr("class", "landscape");

orientation = ‘landscape‘;

return false;

}

}

$(function(){

orient();

});

$(window).bind( ‘orientationchange‘, function(e){

orient();

});



时间: 2024-11-03 21:06:12

css3完美解决手机横竖屏判断,让用户看邀请函更爽的相关文章

判断手机横竖屏

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

Javascript 判断手机横竖屏状态

判断手机横竖屏状态: <script type=”text/javascript”> function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(“竖屏状态!”) } if(window.orientation==90||window.orientation==-90){ alert(“横屏状态!”) } } window.addEventListener(“onorientationcha

检测手机横竖屏切换

我们做移动端项目的时候,为了更好的完善用户体会,经常会需要处理好手机横竖屏时候的效果,下面看一下通过代码如何判断手机是否是横竖屏,两种方式: 一.第一种方式: <style type="text/css">body,html { margin: 0; height: 100%; position: relative; overflow: hidden;} #box { width: 100%; height: 100%; font-size: 20px; position:

zepto判断手机横竖屏

var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initial_orientation_is_landscape, initial_orientation_is_default, portrait_map = { "0": true, "180": true }, ww, wh, landscape_threshold; if(

CSS3(@media)判断手机横竖屏

@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : portrait){ h2{color:green;}/*竖屏时字体绿色*/ } 原文地址:https://www.cnblogs.com/1032473245jing/p/8945096.html

Android手机横竖屏

三.Android设置横屏或竖屏: (一).全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 : requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全

js和css实现手机横竖屏预览思路整理

实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预览,要通过<iframe>标签,左边选择不同的select选项,通过监听select选项的值,在js中动态改变iframe的src来实现: 因为要实现横屏和竖屏的预览,切记,千万不能在点击横屏的时候,把竖屏的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖屏的,只是页面跟着一起旋转了90

完美解决scrollView 截屏图片模糊

UIGraphicsBeginImageContext   首先说明一下UIGraphicsBeginImageContextWithOptions 和UIGraphicsBeginImageContext区别:   1: UIGraphicsBeginImageContext(CGSize size) 参数size为新创建的位图上下文的大小.它同时是由UIGraphicsGetImageFromCurrentImageContext函数返回的图形大小. 该函数的功能同UIGraphicsBeg

iphone手机不同版本兼容、横竖屏

/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ .dialog-agreement-con{ height: 45%; /* iphone4*/ } } @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-dev