理解 Viewport
时间:2022-06-26
本文章向大家介绍理解 Viewport
,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
关于响应式布局
为了能使我们的网页适应不同设备的屏幕尺寸,通常我们会在CSS使用 media queries 来改变不同规格下的页面样式,对于有的元素,只需要增加 width:100% 就足够使其具有响应式布局的能力。
我们会定义多套 CSS 样式,例如:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {/* Styles */}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {/* Styles */}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {/* Styles */}
/* iPads (portrait and landscape) ----------- */@media only screen
and (min-width : 768px)
and (max-width : 1024px) {/* Styles */}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {/* Styles */}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {/* Styles */}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {/* Styles */}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {/* Styles */}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}
定义 Viewport
Meta 标签的 viewport 属性告诉浏览器用什么样的尺寸来渲染视窗。
例如:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用设备的宽度来定义视窗,其初始和最大缩放比例都设置为 100%
不同的设备视窗的规格也不相同,很多手机浏览器设置980px为其显示宽度。它使得网页被渲染成980像素宽,并按这个比例填充整个浏览器。
对于小的显示屏,网站内容会比视窗还大。
改变Viewport的值可以让你定义设备的渲染尺寸。
Viewport的宽度
设置 viewport 的宽度,就像告诉浏览器这就是网页的最佳显示宽度,如果你希望网页在iphone4上得到最佳效果,你可以这样设置:
<meta name="viewport" content="width=320">
但是这样有悖于响应式布局的原则,当你将网页放在其他设备上显示时,你的网页只能看到320像素宽的内容,最好的解决办法是使用设备的宽度
<meta name="viewport" content="width=device-width">
Viewport 的比例
移动设备上,你可以使用一些手势来缩放页面,但是如果你将视窗的宽度与设备相匹配,你将不需要再缩小图像以保证其能全部显示,这里用到了 initial-scale 属性
<meta name="viewport" content="initial-scale=1">
如果你想禁用放大功能,可以增加如下设置
<meta name="viewport" content="maximum-scale=1">
- 在Golang语言中统计程序执行时间
- 经典面试问题: Top K 之 ---- 海量数据找出现次数最多或,不重复的。
- 每天一个Linux命令(2):cd命令
- Golang语言为类型添加方法
- 浅谈 Glide - BitmapPool 的存储时机 & 解答 ViewTarget 在同一View显示不同的图片时,总用同一个 Bitmap 引用的原因
- 100个Numpy练习【2】
- 浅谈 maxMemory , totalMemory , freeMemory 和 OOM 与 native Heap
- 100个Numpy练习【1】
- XGoServer 一个基础性、模块完整且安全可靠的服务端框架
- Bing 每日一图 & 随机图片 API
- 可视化数据库MapD安装——GPU模式
- 12步轻松搞定Python装饰器
- 使用shell脚本检测数据库连接访问情况(r10笔记第98天)
- 贝叶斯分类器及Python实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue 3 正式进入 RC 阶段!
- 广义线性模型应用举例之泊松回归及R计算
- 保持dropdownlist选中值
- 得到目录大小
- DataGrid 的 全选/取消全选 控制(CheckBox)
- App+游戏的变现模式分析
- 我在新版 Creator 2.4.0 发布头条小游戏遇到的坑!不过我爬出来了!
- 为你的好朋友添点评论
- 重磅!H5游戏接入App已经解决了,民间SDK将会崛起!
- 旋转排序的数组
- 【自动化】利用webhooks自动化构建、编译Vue
- k8s prometheus的语法检查
- docker一键部署SpringBoot项目
- SpringBoot 2.3.0 新特性一览,快来跟我实践一波!
- 【腾讯】在前端开发中,如何获取浏览器的唯一标识