HTML5学习总结-番外05 移动终端适配
一 viewport
在使用移动端设备浏览网页时，移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的，通常来说这个虚拟的视图大小会比手机屏幕大，用户可以通过手势操作来平移、缩放这个视图。
如果不加view标签，那么输入以下代码，查看页面，会发现页面是可以缩放的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1 禁用viewport缩放功能
在页面头部加上如下语句来禁用viewport的缩放特性，那么页面就不可以缩放了。
viewport的更详细信息可以参考 Configure Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head> <body>
<div></div>
</body> </html>
如上我们viewport初始化时便适配设备浏览器的宽度，且无法缩放，该meta标签具体参数如下：
width：viewport 的宽度，可以指定一个固定值，如650；或者可以是device-width，表示设备的宽度。
height：和 width 相对应，可指定高度。
initial-scale：页面初始缩放比例(-)
maximum-scale：允许用户缩放到的最大比例(-)
minimum-scale：允许用户缩放到的最小比例(-)
user-scalable：用户是否可以手动缩放（yes/no）
2 CSS3 media queries响应式布局
可以使用media标签在不同分辨率下的移动设备使用不同的样式，语法如下。具体可以参考另外一篇博客响应式布局
参考资料：
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
HTML5学习总结-番外05 移动终端适配的更多相关文章
- HTML5学习总结-番外05 响应式布局
1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
- HTML5学习总结-番外05 http 状态码
所有状态码汇总: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其 ...
- HTML5学习总结-番外03 Angular Ionic
一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把mode ...
- HTML5学习总结-番外04 Cordova/PhoneGap
一 PhoneGap 1 PhoneGap简绍 http://www.cnblogs.com/JustRun1983/p/3819433.html 2 环境安装 http://cordova.apac ...
- openresty 学习笔记番外篇:python的一些扩展库
openresty 学习笔记番外篇:python的一些扩展库 要写一个可以使用的python程序还需要比如日志输出,读取配置文件,作为守护进程运行等 读取配置文件 使用自带的ConfigParser模 ...
- openresty 学习笔记番外篇:python访问RabbitMQ消息队列
openresty 学习笔记番外篇:python访问RabbitMQ消息队列 python使用pika扩展库操作RabbitMQ的流程梳理. 客户端连接到消息队列服务器,打开一个channel. 客户 ...
- Python学习-day10(番外篇) 阻塞IO 非阻塞IO 同步IO 异步IO
这个章节的内容是关于IO的概念,谈一谈什么是 阻塞IO 非阻塞IO 同步IO 异步IO.以下摘要是我对这四种IO的一个形象理解. 场景是去去银行办理业务.节点有三个,1)到银行提交申请:2)取号:3) ...
- H5学习_番外篇_PHP数据库操作
1. 文件操作 1.1 打开关闭文件 fopen() resource fopen ( string filename, string mode [, bool use_include_path [, ...
- 《30天自制操作系统》学习笔记--番外篇之Mac环境下的工具介绍
这几天又有点不务正业了,书也没看,一直在搞这个破环境,尝试各种做法,网上各种垃圾信息,浪费了很多时间,说的基本都是废话,不过还是找到了一些,赶紧写下来,不然这个过几天又忘了 首先是环境,我用的是Max ...
随机推荐
- 前端css框架SASS使用教程（转）
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...
- ip命令和ifconfig命令(转载)
Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...
- android Fragments介绍
Fragments是Android3.0引入的概念,译为片段.碎片,为了解决不同屏幕分辩率的动态和灵活UI设计. Fragment表现Activity中UI的一个行为或者一部分.可以将多个fragme ...
- 0038 Java学习笔记-多线程-传统线程间通信、Condition、阻塞队列、《疯狂Java讲义 第三版》进程间通信示例代码存在的一个问题
调用同步锁的wait().notify().notifyAll()进行线程通信 看这个经典的存取款问题,要求两个线程存款,两个线程取款,账户里有余额的时候只能取款,没余额的时候只能存款,存取款金额相同 ...
- sys.dm_os_waiting_tasks 引发的疑问(上)
很多人在查看SQL语句等待的时候都是通过sys.dm_exec_requests查看,等待类型也是通过wait_type得出,sys.dm_os_waiting_tasks也可以看到session的等 ...
- SQL Server 2008 R2——当前日期下，一年前数据的统计值
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- sql语句查询经纬度范围(转载，源链接失效)
MySQL性能调优 – 使用更为快速的算法进行距离 最近遇到了一个问题,通过不断的尝试最终将某句原本占据近1秒的查询优化到了0.01秒,效率提高了100倍. 问题是这样的,有一张存放用户居住地点经纬度 ...
- shell 脚本之循环使用 for while 详解
任何一种编程语言中循环是比不可少的,当然 shell 脚本也少不了循环语句,包括 for 语句. while 语句.文中主要以实际用例来说明 for while 都有哪些常见的使用方法和技巧. 一.f ...
- Java程序设计求出岁数
题目:我年龄的立方是个4位数.我年龄的4次方是个6位数.这10个数字正好包含了从0到9这10个数字,每个都恰好出现1次,求出我今年几岁. 直接拷贝运行就可以了. public class Age { ...
- Node6.9.2 —— Http官网笔记整理
欢迎指导与讨论 : ) 序章 本文概要:http.Agent代理.http.ClientRequest客户端请求.http.server服务器.http.ServerResponse服务器相应.htt ...