html 构建响应式网站之viewport的使用

时间：2022-09-18 07:53:50

在网页代码的头部，加入一行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&comma;前期准备、导航区域等

    "使用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. Spring多数据源的配置和使用

    1. 配置多个数据源 最近开发一个数据同步的小功能,需要从A主机的Oracle数据库中把数据同步到B主机的Oracle库中.当然能够用dmp脚本或者SQL脚本是最好,但是对于两边异构的表结构来说,直接 ...

  2. Codevs 2296 仪仗队 2008年省队选拔赛山东

    2296 仪仗队 2008年省队选拔赛山东 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题解 题目描述 Description 作为体育委员,C君负责这次运动 ...

  3. 性能测试工具--SIEGE安装及使用简介

    官方网站http://www.joedog.org/ 概述 Siege是一个多线程http负载测试和基准测试工具.它有3种操作模式: 1) Regression (when invoked by bo ...

  4. file 上传文件后缀名 限制

    比如: 要求只能上传Excel <input type="file" accept="application/vnd.ms-excel,application/vn ...

  5. 1132&colon; 零起点学算法39——多组测试数据（a&plus;b&rpar;

    1132: 零起点学算法39--多组测试数据(a+b) Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted: ...

  6. unix下的ACL

    acl可以针对user,组,目录默认属性(mask)来控制. acl需要文件系统支持,ext2/3,jfs,xfs等都支持. getfacl setfacl 对于mac os X系统的acl 可以使用 ...

  7. C&plus;&plus;11 std&colon;&colon;ref使用场景

    C++本身有引用(&),为什么C++11又引入了std::ref(或者std::cref)? 主要是考虑函数式编程(如std::bind)在使用时,是对参数直接拷贝,而不是引用.如下例子: # ...

  8. python中的pop

    pop()将列表指定位置的元素移除,同时可以将移除的元素赋值给某个变量,不填写位置参数则默认删除最后一位 pop()根据键将字典中指定的键值对删除,同时可以将删除的值赋值给变量 举个例子: 1 a = ...

  9. mysql在linux中安装问题和命令

    1. cd /  切换到 根目录. 2. cd /root 切换到根目录下的 root目录. 3. cd .. 切换到当前目录的上级目录. 4. rpm --qa mysql 查询已经安装mysql. ...

  10. Android对敏感数据进行MD5加密（基础回顾）

    1.在工具类的包下新建一个进行md5加密的工具类MD5Utils.java package com.example.mobilesafe.utils; import java.security.Mes ...

相关文章