在网页代码的头部，加入一行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. 年前辞职-WCF入门学习（3）

    前言 [2了,刚写好的,手贱,点了删除,还真TMD的删除了,只好重写] 今天周六,去同事家聚了一个餐,感觉各种豪华. 废话不多说,前两集大致介绍了一下什么是WCF以及和WCF相关的WebService ...

  2. htpasswd 详解

    Apache htpasswd命令用法详解 htpasswd建立和更新存储用户名.密码的文本文件, 用于对HTTP用户的basic认证. # /usr/local/apache/bin/htpassw ...

  3. poj3580 伸展树（区间翻转 区间搬移 删除结点 加入结点 成段更新）

    好题.我做了很久,学了大牛们的区间搬移.主要的代码都有注释. #include<cstdio> #include<cstring> #include<iostream&g ...

  4. hdu5007 字符串

    字符串问题.是否出现iPhone Apple等词:我考虑时想到既然是否有这些词,可以写map标记一下:然后又最长的是iPhone,6个单词,所以第一个for遍历所有单词 然后在一个for(1~6),用 ...

  5. FastDFS在.Net平台上的使用

    上一篇,了解了FastDFS是什么东东,一般稍微大一的网站都会做文件分离存储,FastDFS这轻型的分布式文件存储方式,非常有用. 此图片截取博友(张占岭)的勿喷 下面我们就了解一下,FastDFS在 ...

  6. 【CodeForces 312B】BUPT 2015 newbie practice #3A Archer

    题 SmallR is an archer. SmallR is taking a match of archer with Zanoes. They try to shoot in the targ ...

  7. Fence 设备

    RHCS中必须有Fence设备,在设备为知故障发生时,Fence负责让占有浮动资源的设备与集群断开. REDHAT的fence device有两种, 内部fence设备: IBM RSAII卡,HP的 ...

  8. c中动态使用数组

    #include <iostream> #include <fstream> #include<stdlib.h> #define MAXNUM 200 int I ...

  9. EasyUI datagrid 格式化显示数据

    http://blog.163.com/ppy2790@126/blog/static/103242241201512502532379/ 设置formatter属性,是一个函数,格式化函数有3个参数 ...

  10. js中日历的代码

    Html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...