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;}
}

  

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

  1. ListView 在设备切换横竖屏时保存状态

    比如listview在设备切换横竖屏时,仍然需要保证position, activity - > onSaveInstanceState  - > restoreInstanceState ...

  2. Android 切横竖屏时走的生命周期方法?222

    第一种情况: 不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 第二种情况: 设置Activity的androi ...

  3. 网页调试js时,如何知道某个事件对应哪段js代码?

    有时候我们需要知道某个事件对应的js代码,比如点击一个div元素时,出现下拉框,我想知道这个功能对应的js代码,那就可以按下图操作: 勾选click事件,重新运行,那么就会在每个click事件那里设置 ...

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

    参考:http://www.kankanews.com/ICkengine/archives/106643.shtml iOS下当竖屏转向横屏的时候,发现内容字体会自动变大,通过各种方法设置字体大小都 ...

  5. 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="conver()"> 2.在脚本中用window.onload: <script type=&quo ...

  6. ios5和ios6横竖屏支持及ipad和iphone设备的判断

    ios5和ios6横竖屏支持及ipad和iphone设备的判断 判断是ipad还是iphone设备.此定义在PayViewControllerDemo-Prefix.pch 定义如下: #define ...

  7. Android应用:横竖屏切换总结

    眨眼间,已经到了2016你年春节前,离上一篇博客的时间已经有6个月多,回想起这半年的种种,不得不说,学习和工作实在是太忙了,或许这就是程序员的真实写照吧. 写博客之初,主要的目的还是为了把自己的学习痕 ...

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

    (转自:http://www.cnblogs.com/franksunny/p/3714442.html) (老样子,图片啥的详细文档,可以下载后观看 http://files.cnblogs.com ...

  9. Android 横竖屏切换小结

    (自己体会:每次横竖屏自动切时都会run Activity的onCreate,即相当后重新进入Activity初始化一样:) 转自:http://www.cnblogs.com/franksunny/ ...

随机推荐

  1. javascript原型链简单的理解

    在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[prototype],我们通常称之为原型.原型的值可以是一个对象,也可以是null.当然也可能是一个值,如果它的 ...

  2. 关于@see注解

    所有三种类型的注释文档都可包含@see标记,它允许我们引用其他类里的文档.对于这个标记,javadoc会生成相应的HTML,将其直接链接到其他文档.格式如下: @see 类名@see 完整类名@see ...

  3. mysql计算连续天数,mysql连续登录天数,连续天数统计

    mysql计算连续天数,mysql连续登录天数,连续天数统计 >>>>>>>>>>>>>>>>>& ...

  4. 昨天冲动的搬到外面住了,oh yeah

    昨天我纠结了一天,我是否应该搬到外面去住.我骑着我的自行车,在外面闲逛,我心里想的是,我现在没有钱,可以节约一些生活费,租房的日子,我以后始终都是需要面对的,在目前没有那么多钱的情况下,可以不出去外面 ...

  5. FontAwesome 奥森图标的学习

    很早之前,就看到大家在使用代码做出很漂亮的图标,但是觉得需求不是很大,所以就没有看,但是技多不压身,这次有时间来学习下. FontAwesome官方网站 1,下载文件包 里面有两个文件夹,css 和 ...

  6. 【转】Myeclipse8.5 反编译插件 jad 安装

    [转]Myeclipse8.5 反编译插件 jad 安装 准备工作 下载jad.exe文件下载window版本:http://varaneckas.com/jad/ 下载jadeclipse插件:ht ...

  7. 在线HTML编辑器 kindeditor-4.1.10 上传图片文件 应用指南

    1.在ASPX页面中对应的head.body添加相应的红色部分 2.引用kindeditor-4.1.10中的litjosn.dll 3.在写入数据库时要替换相应的路径和IP 4.kindeditor ...

  8. Acitivity间数据的传递

    使用startActivityForResult方法进行数据传递.    MainActivity.java: public class MainActivity extends Activity { ...

  9. 华为机试_字符串识别_Vector的使用;

    第一题:拼音转数字输入是一个只包含拼音的字符串,请输出对应的数字序列.转换关系如下:描述:      拼音        yi  er  san  si  wu  liu  qi  ba  jiu  ...

  10. Oracle 递归函数与拼接

    ) name FROM table tb START ) CONNECT BY PRIOR ID=mt.parentid ; 在Oracle中,SYS_CONNECT_BY_PATH函数主要作用是可以 ...