在网页代码的头部，加入一行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. AngularJs——grunt神器的使用

    前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例. 1,包装函数 module.e ...

  2. GCD 深入理解：第一部分

    虽然 GCD 已经出现过一段时间了,但不是每个人都明了其主要内容.这是可以理解的:并发一直很棘手,而 GCD 是基于 C 的 API ,它们就像一组尖锐的棱角戳进 Objective-C 的平滑世界. ...

  3. c#批量插入示例

    var sql = @"Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-MvcApplication1-20131029153010;I ...

  4. 作业一_随笔3_调研Android的开发环境的发展演变

    调研某一移动应用/平台的开发环境的发展演变:Android 其实,一开始,我只知道,苹果手机用IOS系统,其他很多手机时候安卓系统.我百度知道Android开发主要是android studio和Ec ...

  5. 在VS2012中编译WinXP兼容的程序

    VS2012默认是不兼容Windows XP的,编译链接出来的程序只能在Windows Vista及以上版本的操作系统上运行.可是有时需要在Windows XP上运行,又不得不用VS2012(例如用了 ...

  6. C#给文件夹添加权限

    //==== //添加权限 private void SetAttributes(string folder) { if (folder == "" || !Directory.E ...

  7. BZOJ-1226 学校食堂Dining 状态压缩DP

    1226: [SDOI2009]学校食堂Dining Time Limit: 10 Sec Memory Limit: 259 MB Submit: 588 Solved: 360 [Submit][ ...

  8. 【poj3177】 Redundant Paths

    http://poj.org/problem?id=3177 (题目链接) 题意 给出一个n个节点m条边的无向图,求最少连几条边使图中没有桥. Solution 我们可以发现,用最少的边使得图中没有桥 ...

  9. 记录一次MVC 3.0错误 HTTP 404您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。

    在部署到IIS7时,MVC3报了一个找不到资源的错误,文件肯定是有的,而且页面是肯定报错的,也就说内部运行错误了,而MVC把错误没有抛出来而已: 所以对症下药,发觉我的项目里面用了rexs进行多语言, ...

  10. git使用记录

    唔,git有本地版本管理功能,所以,这个完全是可以拿来自己做版本管理的.所以有必要学习一下,另外,在oschina上开了个账户,用来管理自己一些代码,也是增加自己学习git的动力. 1. 使用clon ...