防止横竖屏时,iphone自动缩放的一段js代码

function orientation_change() {
    var viewport = document.querySelector(‘meta[name="viewport"]‘);
    if (window.orientation == 0 || window.orientation == 180)
        viewport.setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
    else if (window.orientation == -90 || window.orientation == 90)
        viewport.setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");     
}

window.onorientationchange = orientation_change;

  

window.orientation
:这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式

onorientationchange
: 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似

#b{width:300px;height:200px;background:blue;}
@media screen and (orientation:portrait){
#b{background:red;}
}
@media screen and (orientation:landscape){
#b{background:green;}
}

  

时间: 2024-10-12 21:26:59

防止横竖屏时,iphone自动缩放的一段js代码的相关文章

[css][移动设备]禁止横竖屏时内容自动调整

参考:http://www.kankanews.com/ICkengine/archives/106643.shtml iOS下当竖屏转向横屏的时候,发现内容字体会自动变大,通过各种方法设置字体大小都失败了. 需要在body中设置如下: text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust:none; -webkit-text-size-adjust: none;

Android应用:横竖屏切换总结

眨眼间,已经到了2016你年春节前,离上一篇博客的时间已经有6个月多,回想起这半年的种种,不得不说,学习和工作实在是太忙了,或许这就是程序员的真实写照吧. 写博客之初,主要的目的还是为了把自己的学习痕迹记录下来,写的东西比较基础,也不多,算是一种督促,希望能坚持地学习下去,因为学识不存在暴发户,靠的是积累.如果对自己过去半年的学习给个评价,我还是比较满意的,前期定下来的目标都基本都达到了.单凭这个,我就觉得今年的新年会是个好年. 说完过去,那么接着就是将来.因为现在的工作环境上外网不大方便,而且

Android横竖屏切换重载问题与小结

(转自:http://www.cnblogs.com/franksunny/p/3714442.html) (老样子,图片啥的详细文档,可以下载后观看 http://files.cnblogs.com/franksunny/635350788930000000.pdf) Android手机或平板都会存在横竖屏切换的功能,通常是由物理重力感应触发的,但是有时候也不尽然,通常在设置里面我们可以对手机的横竖屏切换进行关闭,操作界面如下 只需要点击下“屏幕旋转”按钮就可以关闭横竖屏切换了. 一.禁止AP

Android 横竖屏切换小结

转自:http://www.cnblogs.com/franksunny/p/3714442.html (老样子,图片啥的详细文档,可以下载后观看 http://files.cnblogs.com/franksunny/635350788930000000.pdf) Android手机或平板都会存在横竖屏切换的功能,通常是由物理重力感应触发的,但是有时候也不尽然,通常在设置里面我们可以对手机的横竖屏切换进行关闭,操作界面如下 只需要点击下“屏幕旋转”按钮就可以关闭横竖屏切换了. 一.禁止APP内

Android-layout的横竖屏处理

横竖屏处理是开发应用是比较基础的一个要点,几乎都会用到.网上有一大堆的横竖屏切换的文章,但是翻了n页以后发现竟然清一色的是转载,所以不想浪费时间到这个上面,还是自己根据自己的需求与体会总结一下吧,也方便以后查阅 一.layout-land和layout-prot的区别与使用 默认情况下,创建的Android项目里只有一个layout文件夹,尽管这样也可以横竖屏切换用,但是某些布局横屏过后闲的格外的丑,如下图 横屏过后就显示的不全了,有时候看着比较纠结.所以需要在横屏的使用重新载入新的布局文件 解

纯代码适配iPad横竖屏

网上大量的文章在适配iPad横竖屏时都使用了xib或storyboad, 但是xib和storyboard并不受团队开发欢迎,下面介绍采用纯代码的方式适配iPad的横屏和竖屏,方法非常简单: 1.) 设置要适配的对象的autoresizingMask,  eg: targetView.autoresizingMask = UIViewAutoresizingFlexibleHeight; 2.)   在当前的视图控制器中调用[self willRotateToInterfaceOrientati

Android横竖屏切换的生命周期

现在的手机默认情况下可以横竖屏切换,但是横竖屏切换的生命周期是怎么样的,今天就来说明一下,以防你开发的app横竖屏时game over 1.在不做任何配置的情况下,加载一个activity的打印日志: 切换屏幕时方向的打印日志: ps:我这里没出现什么横屏切换竖屏时执行两次oncreate,个人觉得不对 2.配置android:configChanges="keyboardHidden|orientation|screenSize"时,屏幕切换时,不会出现重启activity 3.配置

避免切换横竖屏Fragment的重复加载导致UI混乱

当我们切换横竖屏时 Activity的生命周期就会重走一遍,自然 其中的Fragment的生命周期也就重新走了一遍,实践证明 当熄屏 再开屏时 Fragment的生命周期也会重走一遍 解决方案: android:configChanges="orientation|keyboardHidden|screenSize" 在Activity的配置设置中添加ConfigChanges属性  当切换横竖平时Activity不会重新 走onCreate而是执行onConfigurationCha

检测手机横竖屏切换

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