在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. 爬虫框架Scrapy入门——爬取acg12某页面

    1.安装1.1自行安装python3环境1.2ide使用pycharm1.3安装scrapy框架2.入门案例2.1新建项目工程2.2配置settings文件2.3新建爬虫app新建app将start_ ...

  2. xpath的|

    xpath的| 相当与交集 本爬虫爬取的是热门城市和全国城市,但是由于爬取的规则不同,所以在同一个xpath中使用了两种规则 import requests from lxml import etre ...

  3. for循环、while循环、break跳出循环、continue结束本次循环、exit退出整个脚本

    7月13日任务 20.10 for循环20.11/20.12 while循环20.13 break跳出循环20.14 continue结束本次循环20.15 exit退出整个脚本扩展select用法 ...

  4. 【游记】CSP J/S 2019 游记

    J 组 \(2:30\)开始, \(2:13\)还在酒店的我看了看手表...飞奔考场. T1 数字游戏 秒切. 下午某中学某大佬说可用线性基(%) T2 公交换乘 用单调队列思想,秒切. T3 纪念品 ...

  5. git的用法 回到某个版本

    进入到项目文件夹 如果新建项目时没有勾选git 进入到项目中

  6. PHP自动发红包代码示例

    <?php header('Content-type:text'); define("TOKEN", "weixin"); $wechatObj = ne ...

  7. VMware修改默认开机方式

    .首先删除已经存在的符号链接 ---------------------------------------------------------------------------------- rm ...

  8. 使用 Spring 提供的 restTemplate 完成 Http 服务消费

    RestTemplate 介绍 RestTemplate 是 Spring 提供的用于访问 Rest 服务的客户端,RestTemplate 提供了多种便捷访问远程 Http 服务的方法,能够大大提高 ...

  9. 2018 ACM-ICPC南京区域赛题解

    解题过程 开场开A,A题shl看错题意,被制止.然后开始手推A,此时byf看错E题题意,开始上机.推出A的规律后,shl看了E题,发现题意读错.写完A题,忘记判断N=0的情况,WA+1.过了A后,sh ...

  10. HDU-6113

    度度熊是一个喜欢计算机的孩子,在计算机的世界中,所有事物实际上都只由0和1组成. 现在给你一个n*m的图像,你需要分辨他究竟是0,还是1,或者两者均不是. 图像0的定义:存在1字符且1字符只能是由一个 ...