在网页代码的头部，加入一行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. KMP和扩展KMP

    文章网上太多这里提一下代码细节: KMP: scanf("%s\n",s); scanf("%s\n",t); int ls=strlen(s),lt=strl ...

  2. [Json.net]Linq to Json

    引言 上篇学习了json.net的基本知识,这篇学习linq to json. 上篇文章:[Json.net]快速入门 Linq to Json Linq to Json是用来快速操作json对象的, ...

  3. WCF入门（11）

    前言 终于出太阳了. 可惜风太大,凉在阳台上的衣服全被吹到了地上,外加几双袜子被吹掉了,gone. 第11集 Difference between DataContract and MessageCo ...

  4. jQuery基础之（六）jQuery浏览器的兼容性（以CSS3特写兼容举例）

    CSS3充分吸收多年了web发展的需求,吸收了很多新颖的特性.例如border-radius css3特性中最令人兴奋的莫过于选择器的增强,例如属性选择器可以根据某个属性值来选择标记,位置选择器可以根 ...

  5. All thanks

    How to make a salad?——Silun Wang 这是一次成功的团队合作,我为所有组员感到骄傲和自豪!感谢你们! 上个学期期末,和@老钱他们一起去五道口吃Pizza,谈到了大三上学期的 ...

  6. photoshop将psd导出div+css格式HTML（自动）

    psd切片切好后,导出 web格式,存储时选择html.所有切片,然后,选择其他,选择自定,选择切片,选择生成css css命名有2种方式,根据ID和根据类,一般选择根据类(ID尽量少有,防止js要用 ...

  7. 关于Jquery 操作Cookie 取值错误

    使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现cookie有四个不同的属性: 名称,内容,域,路径 $.cookie('the_cookie'); // 读取 cookie $ ...

  8. linux 通过哪个命令可以查看某个服务及其端口、进程号

    netstat/lsof netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况 -a 显示一个所有的有效连接信息列表(包括已建立的连接,也 ...

  9. 【bzoj1042】 HAOI2008—硬币购物

    http://www.lydsy.com/JudgeOnline/problem.php?id=1042 (题目链接) 题意 共有4种硬币,面值分别为c1,c2,c3,c4.某人去商店买东西,去了to ...

  10. jquery无限级下拉框

    非原创,已修改成通用版,效果如下: 下载:http://files.cnblogs.com/files/EasonJim/jquery.menu.rar 项目相关地址 源码:https://githu ...