一 viewport

　　在使用移动端设备浏览网页时，移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的，通常来说这个虚拟的视图大小会比手机屏幕大，用户可以通过手势操作来平移、缩放这个视图。

　　如果不加view标签，那么输入以下代码，查看页面，会发现页面是可以缩放的。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             div{
  8.                 width:  100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <div></div>
  16.     </body>
  17. </html>

1 禁用viewport缩放功能
　　在页面头部加上如下语句来禁用viewport的缩放特性，那么页面就不可以缩放了。

　　viewport的更详细信息可以参考 Configure Viewport

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

　　完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  6.         <title></title>
  7.         <style>
  8.             div {
  9.                 width: 100px;
  10.                 height: 100px;
  11.                 background-color: red;
  12.             }
  13.         </style>
  14.     </head>
  15.  
  16.     <body>
  17.         <div></div>
  18.     </body>
  19.  
  20. </html>

　　如上我们viewport初始化时便适配设备浏览器的宽度，且无法缩放，该meta标签具体参数如下：

  1. width：viewport 的宽度，可以指定一个固定值，如650；或者可以是device-width，表示设备的宽度。
  2. height：和 width 相对应，可指定高度。
  3. initial-scale：页面初始缩放比例(-)
  4. maximum-scale：允许用户缩放到的最大比例(-)
  5. minimum-scale：允许用户缩放到的最小比例(-)
  6. user-scalable：用户是否可以手动缩放（yes/no）

2 CSS3 media queries响应式布局

可以使用media标签在不同分辨率下的移动设备使用不同的样式，语法如下。具体可以参考另外一篇博客响应式布局

参考资料：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

HTML5学习总结-番外05 移动终端适配的更多相关文章

  1. HTML5学习总结-番外05 响应式布局

    1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...

  2. HTML5学习总结-番外05 http 状态码

    所有状态码汇总: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码   说明100   (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其 ...

  3. HTML5学习总结-番外03 Angular Ionic

    一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把mode ...

  4. HTML5学习总结-番外04 Cordova/PhoneGap

    一 PhoneGap 1 PhoneGap简绍 http://www.cnblogs.com/JustRun1983/p/3819433.html 2 环境安装 http://cordova.apac ...

  5. openresty 学习笔记番外篇:python的一些扩展库

    openresty 学习笔记番外篇:python的一些扩展库 要写一个可以使用的python程序还需要比如日志输出,读取配置文件,作为守护进程运行等 读取配置文件 使用自带的ConfigParser模 ...

  6. openresty 学习笔记番外篇:python访问RabbitMQ消息队列

    openresty 学习笔记番外篇:python访问RabbitMQ消息队列 python使用pika扩展库操作RabbitMQ的流程梳理. 客户端连接到消息队列服务器,打开一个channel. 客户 ...

  7. Python学习-day10(番外篇) 阻塞IO 非阻塞IO 同步IO 异步IO

    这个章节的内容是关于IO的概念,谈一谈什么是 阻塞IO 非阻塞IO 同步IO 异步IO.以下摘要是我对这四种IO的一个形象理解. 场景是去去银行办理业务.节点有三个,1)到银行提交申请:2)取号:3) ...

  8. H5学习_番外篇_PHP数据库操作

    1. 文件操作 1.1 打开关闭文件 fopen() resource fopen ( string filename, string mode [, bool use_include_path [, ...

  9. 《30天自制操作系统》学习笔记--番外篇之Mac环境下的工具介绍

    这几天又有点不务正业了,书也没看,一直在搞这个破环境,尝试各种做法,网上各种垃圾信息,浪费了很多时间,说的基本都是废话,不过还是找到了一些,赶紧写下来,不然这个过几天又忘了 首先是环境,我用的是Max ...

随机推荐

  1. ArcGIS Engine开发前基础知识（4）

    ArcGIS不同开发方式的比较 关于GIS应用软件的开发,通常有三种方式:C/S架构.网络GIS和移动GIS.ArcGIS平台提供了对三种开发方式的支持,对于采用从C/S架构的大多数开发者来讲,首先想 ...

  2. ListView和Adapter数据适配器的简单介绍

    ListView 显示大量相同格式数据 常用属性: listSelector            listView每项在选中.按下等不同状态时的Drawable divider            ...

  3. 常见排序算法(附java代码)

    常见排序算法与java实现 一.选择排序(SelectSort) 基本原理:对于给定的一组记录,经过第一轮比较后得到最小的记录,然后将该记录与第一个记录的位置进行交换:接着对不包括第一个记录以外的其他 ...

  4. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  5. 怎么修改与设置.java文件属性？

    1.首先  打开  >>  Myeclipse或Eclipse.(我用的是Myeclipse) 2.打开  >>  Window  >>  Preferences  ...

  6. iOS系列 基础篇 01 构建HelloWorld，剖析并真机测试

    iOS基础 01 构建HelloWorld,剖析并真机测试 前言: 从控制台输出HelloWorld是我们学习各种语言的第一步,也是我们人生中非常重要的一步. 多年之后,我希望我们仍能怀有学习上进的心 ...

  7. 解决Native atomics support not found问题

    今天用arm-none-linux-gnueabi交叉编译libmysqclient.so,出现Native atomics support not found问题 进入mysql-connector ...

  8. Linux paste命令

    Linux paste命令用于合并文件的列. paste指令会把每个文件以列对列的方式,一列列地加以合并. 语法 paste [-s][-d <间隔字符>][--help][--versi ...

  9. javascript判断数组中是否包含某个元素

    //判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false function array_contain(array, obj){ for (var i = 0; i ...

  10. 使用MongoDB和JSP实现一个简单的购物车系统

    目录 1 问题描述  2 解决方案  2.1  实现功能  2.2  最终运行效果图  2.3  系统功能框架示意图  2.4  有关MongoDB简介及系统环境配置  2.5  核心功能代码讲解  ...