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-device-pixel-ratio: 2){
.dialog-agreement-con{
height: 55%; /* iphone5*/
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
.dialog-agreement-con{
height: 60%; /* iphone6竖屏*/
}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
.dialog-agreement-con{
height: 60%; /* iphone6 plus竖屏*/
}
}
.dialog-agreement-con{
overflow-y:scroll;
margin-bottom: 2rem;
} CSS判断横屏竖屏 @media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
} JS判断横屏竖屏 //判断手机横竖屏状态:
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态!');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态!');
}
}, false); //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。 // 横屏监听
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验,请将手机/平板竖过来!');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;
iphone手机不同版本兼容、横竖屏的更多相关文章
- [Flex] flex手机项目如何限制横竖屏?只允许横屏?
flex手机项目如何限制横竖屏?只允许横屏? 有人知道吗?求教.. 工程中 xxx-app.xml 找到</aspectRatio> 去掉注释 修改为<aspectRatio&g ...
- 踩过的坑—iphone手机H5样式兼容总结
对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作 ...
- JS获取移动端系统信息(操作系统、操作系统版本、横竖屏状态、设备类型、网络状态、生成浏览器指纹)
function getOS() { // 获取当前操作系统 var os; if (navigator.userAgent.indexOf('Android') > -1 || navigat ...
- ios5和ios6横竖屏支持及ipad和iphone设备的判断
ios5和ios6横竖屏支持及ipad和iphone设备的判断 判断是ipad还是iphone设备.此定义在PayViewControllerDemo-Prefix.pch 定义如下: #define ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- Iphone和iPad适配, 横竖屏
竖屏情况下: [UIScreen mainScreen].bounds.size.width = 320 [UIScreen mainScreen].bounds.size.width = 568 横 ...
- iPhone手机怎么投屏到电脑上
如今生活水平不断上升,人们更加追求高质量.高享受的生活,所以可以利用一切资源提高生活质量,享受更好的生活体验,比如说手机投屏电脑就可以提高我们的视觉体验,所以更多的人去尝试,那么iPhone手机怎么投 ...
- iPhone手机怎么投屏到电脑 airplay在哪里设置
iPhone手机怎么投屏到电脑?想要小屏转大屏,其实方法很简单,简单几步就可以操作,下面简单几步教大家手机投屏电脑的方法. 使用工具: Iphone&电脑 操作方法: 1.如果想要把手机本地的 ...
随机推荐
- Extjs 组件共用(单例)问题
说明: 将store初始化在类定义时便创建, store实例将成为该类的单例 代码: 测试: 说明: 将store初始化放入initComponent函数中. 每次都将创建一个新的实例. 代码: 测 ...
- Python统计百分比及排序
source.txt: 60行 89 91 93 90 92 92 94 92 89 95 93 92 90 92 93 94 94 92 90 92 92 92 ... 统计各个值的百分比,并排序 ...
- SSH端口映射
host1:内网主机,承载有网站 host2:外网主机,准备作为代理 方案一: 在host2上执行: # ssh -CnNfgL *::host1_ip: user@host1_ip 方案二:在hos ...
- git stash简介
原文:http://gitbook.liuhui998.com/4_5.html 一.基本操作 当你正在做一项复杂的工作时, 发现了一个和当前工作不相关但是又很讨厌的bug. 你这时想先修复bug再做 ...
- ios iphone6 Plus 的适配问题
最近更新一个老程序,发现在iphone6 plus上用nslog打印出的screen 的frame还是320*568, 不是414*736, 查了一下,原来需要设置iphone6 plus的启动画面才 ...
- Python批量修改文件名-后缀
LyncLynn用途: 批量修改文件格式,文件名后缀. #Version: V1.0 #Author:lynclynn #Description:Change the filename #Create ...
- [转] 理解 Thread.Sleep 函数
原文链接:http://www.cnblogs.com/ILove/archive/2008/04/07/1140419.html 我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时 ...
- Greedy:Physics Experiment(弹性碰撞模型)(POJ 3848)
物理实验 题目大意:有一个与地面垂直的管子,管口与地面相距H,管子里面有很多弹性球,从t=0时,第一个球从管口求开始下落,然后每1s就会又有球从球当前位置开始下落,球碰到地面原速返回,球与球之间相碰会 ...
- Divide and conquer:Moo University - Financial Aid(POJ 2010)
Moo University - Financial Aid 其实是老题了http://www.cnblogs.com/Philip-Tell-Truth/p/4926008.html 这一次我们换二 ...
- js中setInterval与setTimeout用法
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...