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. [转]div里table居中的问题 Div与body顶部间隙

    本文转自:http://www.cnblogs.com/jinhui/archive/2008/09/24/1297729.html 将div的text-align设为center,然后将table的 ...

  2. [转].net 调用oracle存储过程返回多个记录集

    本文转自:http://www.netwinform.com/articleinfo.aspx?id=17 存储过程: CREATE OR REPLACE PROCEDURE p_query_cs ( ...

  3. 关于Git补丁文件交互

    之前各个章节的版本库的交互都是通过 git push和git pull命令来实现的.这个是Git最主要的交互模式,但并不是全部. 使用补丁文件是另外一种交互方式,适用于参与者众多的大型项目进行的分布式 ...

  4. 基于Selenium2+Java的UI自动化(1) - 原理和环境搭建

    一.Selenium2的原理 Selenium1是thoughtworks公司的一个产品经理,为了解决重复烦躁的验收工作,写的一个自动化测试工具,其原理是用JS注入的方 式来模拟人工的操作,但是由于J ...

  5. 【转】The content of element type "configuration" must match "(properties?,settings?,typeAliases?,typeHandlers?,objectFactory?...

    [转]The content of element type "configuration" must match "(properties?,settings?,typ ...

  6. 崩溃信息:Message from debugger: Terminated due to signal 9

    是因为你在调试的时候主动了结束了程度,如上滑结束了程序

  7. [GeekBand] C++学习笔记(2)——BigThree、OOP

    本篇笔记主要分为三个部分,第一部分是以String类为例的基于对象的编程,重点在于构造与析构.拷贝构造函数.拷贝赋值函数三个重要函数.这一部分与笔记(1)中的内容结合起来就是基于对象编程的主要内容.第 ...

  8. Json操作

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. dd命令测试linux磁盘读写速度

    1.先熟悉两个特殊的设备:    (1)/dev/null:回收站.无底洞.    (2)/dev/zero:产生字符. 2.测试磁盘写能力    time dd if=/dev/zero of=/t ...

  10. JEECG开发总结

    一:datagrid列表 (1)时间:<t:dgCol title="创建时间" field="createtime" width="60&qu ...