在网页代码的头部，加入一行viewport元标签

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>test</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />   //viewport 元标签

...

</head>

...

viewport是网页默认的宽度和高度

上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width）

原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

viewpoint说明

  • width 控制viewpoint的宽度，可以是固定值，也可以是device-width，即设备的宽度
  • height 高度
  • initial-scale 控制初始化缩放比例，1.0表示不可以缩放
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例

    可见如果不定义viewpoint的话，页面宽度以屏幕分辨率为基准，而设置以后可以根据设备宽度来调整页面，达到适配终端大小的效果

什么是Viewport?

       手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

html 构建响应式网站之viewport的使用的更多相关文章

  1. Skeljs – 用于构建响应式网站的前端开发框架

    skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...

  2. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

  3. h5和css3构建响应式网站

    响应式页面组成 灵活图像,媒体:资源尺寸使用百分比定义 流式布局,所有width属性使用百分比设定,水平属性通常使用相对单位(em,百分数,rem等) 媒体查询,根据媒体特征进行设计调整 创建可伸缩图 ...

  4. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  5. 实战SpringCloud响应式微服务系列教程（第九章）使用Spring WebFlux构建响应式RESTful服务

    本文为实战SpringCloud响应式微服务系列教程第九章,讲解使用Spring WebFlux构建响应式RESTful服务.建议没有之前基础的童鞋,先看之前的章节,章节目录放在文末. 从本节开始我们 ...

  6. 使用Quasar设计Material和IOS风格的响应式网站

    使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com   本文转载自:https://segmentfaul ...

  7. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  8. 【Web探索之旅】第二部分第五课：响应式网站和移动应用

    内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Applicati ...

  9. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

随机推荐

  1. DOM系列---进阶篇

    内容提纲: 1.DOM类型 2.DOM扩展 3.DOM操作内容 一．DOM类型 DOM基础篇中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型.   DOM类 ...

  2. Timer的性能优势

    假如有这样一个场景,1个100万用户同时在线的系统,假设有一个Session管理器来管理它们的存亡,每个用户的Session有效时间假设5分钟,通常一个最简单的做法是在一个Session管理器中启动一 ...

  3. Java算法-hash算法

    Hash ,一般翻译做“ 散列” ,也有直接音译为“ 哈希” 的,就是把任意长度的输入(又叫做预映射, pre-image ),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩 ...

  4. Java基础-常量，变量，成员变量，局部变量

    在java中,数据是以常量和变量两种方法形式进行存储和表示的(实际上,所有程序的数据都是这两种形式). 变量 变量代表程序的状态.程序通过改变变量的值来改变整个程序的状态,或者说得更大一些,也就是实现 ...

  5. url的编码问题

    JQuery中 编码 var url = 'folder/index.html?param=#23dd&noob=yes'; var encodedUrl = encodeURICompone ...

  6. 【Matplotlib】绘图常见设置说明

    说明:此贴会不定期进行更新! 设置1:图像的大小设置. 如果已经存在figure对象,可以通过以下代码设置尺寸大小: f.set_figheight(15) f.set_figwidth(15) 若果 ...

  7. 【BZOJ-2879】美食节 最小费用最大流 + 动态建图

    2879: [Noi2012]美食节 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1366  Solved: 737[Submit][Status] ...

  8. Bringing up interface eth0: Error:Connection activation failed:Device not managed by NetworkManager

    Just follow the below steps and everything will be ok...   1. Remove Network Manager from startup Se ...

  9. SQLServer错误：过程 sp_addextendedproperty，第 xxx 行对象无效。'dbo.xxx.xxx' 不允许有扩展属性，或对象不存在。

    上传数据库到虚拟主机,在执行SQL脚本的时候出现以下的错误: 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,第 37 行 对象无效.'dbo.Messag ...

  10. Vijos1056 图形面积

    描述 桌面上放了N个平行于坐标轴的矩形,这N个矩形可能有互相覆盖的部分,求它们组成的图形的面积. 格式 输入格式 输入第一行为一个数N(1≤N≤100),表示矩形的数量.下面N行,每行四个整数,分别表 ...