在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. 浅谈ZooKeeper基本原理与源码分析

    最近一直有小伙伴私信我,问一些关于Zookeeper的知识,下边关于的Zookeeper的知识整理了一下,一起学习一下. 看完本文对于Zookeeper想深入全面了解的读者朋友们,小编这里整理了一份更 ...

  2. CSS 导入-选择器-权重

    CSS 导入-选择器 Cascading Style Sheets 层叠样式表 它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言 CSS语法结构 选择器 声明{} 属性名:属性值 c ...

  3. Netty学习——Apache Thrift 简介和下载安装

    Netty学习——Apache Thrift 简介和下载安装 Apache Thrift 简介 本来由Facebook开发,捐献给了Apache,成了Apache的一个重要项目 可伸缩的,跨语言的服务 ...

  4. Flask开发天气查询软件，带你掌握pipenv的使用与手机Termux下的部署

    关于pipenv 昨天介绍了pipenv这个相比于virtualenv更高端大气上档次的虚拟环境管理软件,但看了下流量貌似不是很受欢迎,也许是我介绍的不够好吧.那么今天就拿它做一个例子,开发一款天气预 ...

  5. 深入比特币原理（三）——交易的输入(input)与输出(output)

    本节内容非常重要,如果你不能很好的掌握本节内容,你无法真正理解比特币的运行原理,请务必要学习清楚. 比特币的交易模型为UTXO(unspend transaction output),即只记录未花费的 ...

  6. luogu P2824 [HEOI2016/TJOI2016]排序

    题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...

  7. oracle逻辑存储结构

    oracle数据库管理系统有三个重要的概念:实例.数据库.数据库服务器.oracle数据库的存储结构可以分为逻辑存储结构和物理存储结构.逻辑存储结构用于描绘Oracle内部组织和管理数据的方式,而物理 ...

  8. Linux编辑器vi使用方法详细介绍(转)

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  9. 谈架构设计中DDD思想的运用

    首先,描述一下我的业务场景及项目分层结构,非标准DDD(其实我不觉得有标准),只是思考的时候有带入DDD思想. 业务场景:这是一个ERP系统对中台提供的接口项目,仓储操作大多都是存储过程去完成的. 项 ...

  10. HDU1846 Brave Game(巴什博弈)

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻. 今天,大家选择 ...