在iPhone系列和iPod Touch中使用的是Safari浏览器，它支持前面介绍的媒体查询表达式。例如，使用iPhone 320px×480px的分辨率去访问我们前面的布局示例，却无法得到我们想看到的结果，并不是从上到下排列显示，而是和计算机显示器访问的布局相同。为什么会这样？因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的，因为很多网页是按照800px左右标准制作的，所以Safari浏览器默认按照980px的宽度进行显示，就可以正常显示绝大多数的网页。所以即使已经写好了页面在小尺寸窗口中运行的样式，iPhone中的Safari浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。解决方法是在页面的头部<head></head>之间加上如下所示的语句：

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

或：

<meta name="viewport" content="width=600px " />

<meta>标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。该属性可以使用的参数如下。

Ø　width：viewport的宽度。

Ø　height：viewport的高度。

Ø　initial-scale：初始缩放比例。

Ø　minimum-scale：允许用户缩放到的最小比例。

Ø　maximum-scale：允许用户缩放到的最大比例。

Ø　user-scalable：用户是否可以手动缩放。

如果在页面中已经准备好了在小尺寸窗口中使用的样式，并且有可能在iPhone或iPod Touch中被打开时，请不要忘记加入<meta>标签并在标签中写入指定的窗口宽度。其实还可以通过viewport把自己“冒充”成更宽的屏幕。

IT兄弟连 HTML5教程 在移动设备上设置原始大小显示的更多相关文章

  1. IT兄弟连 HTML5教程 了解HTML5的主流应用1

    在很多人眼里,HTML5与互联网营销密切相关,但其实从开发者的角度而言,它是一种网页标准,定义了浏览器语言的编写规范.伴随HTML5标准尘埃落定,浏览器对HTML5特性的逐步支持,再加上国内对HTML ...

  2. IT兄弟连 HTML5教程 响应式网站的内容设计

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1  响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在 ...

  3. IT兄弟连 HTML5教程 Media Queries的使用方法

    在上例中,我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件 ...

  4. IT兄弟连 HTML5教程 响应式布局实例

    在学习Media Queries模块前,先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用.在本例中,使用HTML5的结构元素定义了5个盒子.当浏览器窗口尺寸不同时 ...

  5. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  7. IT兄弟连 HTML5教程 HTML文档头部元素head

    HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于 ...

  8. IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段

    第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...

  9. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

随机推荐

  1. Mysql多表关系

    mysql多表关系 多表关系是关系型数据库特有的 三种关系 一对一关系 一对多关系 多对多关系 总结 一对一 例子:用户和用户信息 外键设置在用户上,外键字段唯一非空 添加 无级联:先增加被关联表记录 ...

  2. 微信小程序实现，可滑动、可点击

    tab.wxml: 全部 中奖 未中奖 全部 中奖 未中奖 tab.wxss: .swiper-tab { width: 100%; border-bottom: 2rpx solid #ccc; t ...

  3. 构建一个flink程序,从kafka读取然后写入MYSQL

    最近flink已经变得比较流行了,所以大家要了解flink并且使用flink.现在最流行的实时计算应该就是flink了,它具有了流计算和批处理功能.它可以处理有界数据和无界数据,也就是可以处理永远生产 ...

  4. Redis集群生产环境源码安装

    安装redis集群  根据各人单位生产环境用户搭建一.安装环境    操作系统:centos7.6 关闭防火墙.关闭selinux redis1:192.168.26.128 redis2:192.1 ...

  5. 华为云ModelArts 2.0全面升级，革新传统AI开发模式

    [中国,上海,9月20日] 在HUAWEI CONNECT 2019期间,华为云EI服务产品部总经理贾永利宣布--华为云AI重装升级,并重磅发布一站式AI开发管理平台ModelArts 2.0. 现场 ...

  6. 还在用背单词App？使用Python开发英语单词自测工具，助你逆袭单词王！

    学英语广告 最近也许是刚开学的原因,不管是公众号,还是刷抖音,导出都能看到关于学英语.背单词的广告. 不知道现在学生们背单词买的什么辅导材料.反正我们上学那会,<星火阅读>特别的火.记得当 ...

  7. IDEA插件开发（一）一个简单的表单demo

  8. 大数据之Linux基本指令

    1:文件操作类指令 ls 是英文单词list 的简写, 其功能为列出目录的内容,是最常用的命令之一 -a all 显示指定目录下所有子目录与文件, 包含隐藏文件 -l 以列表方式显示文件的详细信息 - ...

  9. Appium之实操（了解配置项）

    使用Appium,测试对象APP的运行环境有两种:① 真实设备 如手机  ②模拟器 如夜神 连接真实设备: - 进入开发者模式,启动usb调试 - 在电脑上 执行adb命令  adb devices ...

  10. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...