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. posix thread概述

    1. 基本概念 一个Unix进程可以理解为一个线程加上地址空间.文件描述符和其他数据.异步表明事情相互独立发生, 除非有强加的依赖性. 并发指实际可能是穿行发生的事情好像同时发生一样.并行指并发序列同 ...

  2. DROP--删除表

    DROP TABLE table_name; 说明: 1.必须有表的权限 2.表不能有外键约束

  3. JavaScript高级程序设计(第三版)学习笔记1~5章

    第2章,在html中使用JavaScript Html引入外部js脚本 <script type="text/javascript" src="test.js&qu ...

  4. NC参照查那个表

    select * from bd_refinfo where name like '%人员工作记录全职树(行政树)%';select * from bd_refinfo where name like ...

  5. mvn常见命令

    http://www.cnblogs.com/adolfmc/archive/2012/07/31/2616908.html 创建一个简单的Java工程:mvn archetype:create -D ...

  6. svn---命令行操作

    一.基本操作 1.checkout是将服务器上的代码下载到本地(下载所有文件).Checkout只需要做一次 2.commit是将本地修改之后的文件提交到服务器(只提交修改之后的).每天下班前:com ...

  7. Wix installer: suppressing the License Dialog

    Reference Link:  http://blog.robseder.com/2014/02/20/more-on-wix-and-suppressing-the-license-dialog/ ...

  8. Where does Windows store MSI files for uninstallation?

    Original link: Where does Windows store MSI files for uninstallation? Following content are only use ...

  9. ASP.NET MVC 学习笔记(1)

    从头开始系统地学习ASP.NET MVC 为什么要学习ASP.NET MVC?原因很多,可以先来看一下最早的ASP.NET WebForm的一些缺点: 传说中面试经常要问到的ASP.NET WebFo ...

  10. Spring MVC中Ajax实现二级联动

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...