怎么把页面按比例缩小_meta viewport 是做什么用的,怎么写?
前置知识(有助于viewport的理解)
李明:设备像素、设备独立像素、CSS像素、分辨率、PPI、devicePixelRatiozhuanlan.zhihu.com
移动端的问题
屏幕窄,一般来说设备独立像素不超过400px。
比如把网站侧边栏宽度设置为10%,这在PC浏览器看起来没问题(一般视窗大于1000px),但在手机上就只有40px,太小了什么都放不下。
visual viewport 和 layout viewport
我们把layout viewport想象为一个很大的照片,把visual viewport想象为在一张板子上开了的矩形口子。板子在照片上移动时,透过口子(visual viewport) 可以看到照片(layout viewport)的其中部分。
- layout viewport是页面渲染时所参考的宽高
- visual viewport 是移动端视窗的设备独立像素宽高
在移动端,页面在渲染时以layout viewport宽度作为计算标准。以iphone为例,其 layout viewport 宽度是980px,页面元素渲染时就认为窗口为980px宽。对于如下两个buton,在Iphone Safari上.button-1
的宽度为为.button-2
的1/10。渲染后在整体缩小(user-scale)页面,让页面宽度正好完全填充屏幕。缩小后的.button-1的宽度为37.5px,为屏幕宽度的1/10,可读性变差了。
.button-1 {width: 98px;
}
.button-2 {width: 100%;
}
为解决这一问题,需要设置viewport
viewport的概念
对于页面上一个div元素,我们给他设置width: 10%,这个10%是相对于谁?最终是多宽?
<html><body><div style="width:10%">测试宽度</div></body>
</html>
div是body的10%, body和html等宽,html和浏览器窗口等宽,当改变浏览器窗口宽度时,div的宽度也会改变,大家可以自行测试。
假设有如下页面,没设置viewport。对于大部分浏览器,会以980px宽度去渲染,然后页面会缩小到正好被屏幕容纳为止。此时页面上元素看起来很小。如下图所示:
部分浏览器可能不去做自动缩放,用户需要左右滑动页面才能看到所有内容,如下图:
现在添加<meta name="viewport" content="width=device-width">
,假设在IphoneX上预览,其device-width就是其设备独立像素,即375px。
最终效果如下,看起来好多了。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=0.5">
width
width属性被用来控制layout viewport(布局视窗)的宽度,layout viewport(布局视窗)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以?width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,width=device-width 也就是将layout viewport(布局视窗)的宽度设置为设备屏幕分辨率的宽度。网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备独立像素),layout viewport的宽度=屏幕分辨率的宽度=dip 的宽度。
initial-scale
initial-scale用于指定页面的初始缩放比例,initial-scale=1 表示将layout viewport的宽度设置为屏幕分辨率的宽度,initial-scale=1.5 表示将layout viewport的宽度设置为屏幕分辨率宽度的1.5倍。
maximum-scale
maximum-scale用于指定用户能够放大的最大比例,假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。
minimum-scale
类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。设置为0.5表示用户能够将页面缩小到初始页面的0.5倍,通常情况下,不会定义该属性的值,页面太小将难以阅读。
怎么把页面按比例缩小_meta viewport 是做什么用的,怎么写?相关推荐
- 今天加班做了昨天晚上要写的页面,用到了一些之前用过但还不熟悉需要上网搜索才能用的知识点:...
今天加班做了昨天晚上要写的页面,用到了一些之前用过但还不熟悉需要上网搜索才能用的知识点: 1.Action中取请求参数的几种方法总结 方法一:当把参数作为Action的类属性,且提供属性的getter ...
- 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看?
无意间在知乎看见的,感觉讲得很有道理.看原文点这里 ------> 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看? 2年经验做的东西没什么技术含量,应 ...
- 专题页面无原创确能做排名的原因及做法
网站专题页面具备相干性跟 丰盛性,而相干性跟 丰盛性又是影响关键词seo优化的中心点,也就是说具备一定品质度的专题页面取得排名的概率会更高,控制一些网站专题页面seo优化方式,把想到达排名的关键词用专 ...
- ppt怎么把图片做成翻书效果_ppt页面翻书效果怎么做?ppt翻书效果制作
ppt页面翻书效果怎么做?ppt翻书效果制作 ppt页面翻书效果怎么做?是否早已厌烦平平常常的PPT展现方法呢?是否早已反感了没什么创意的图片展示方式呢?是否还莫有了解PPT的翻书动画效果呢?今日就和 ...
- [html] 页面中怎么嵌入Flash?有哪些方法?写出来
[html] 页面中怎么嵌入Flash?有哪些方法?写出来 <object width="550" height="400"><param n ...
- r语言软件GDINA_finTech MSc代做、代写Python程序语言、代写MSc program、代做Python设计帮做C/C++编程|代写R语言...
finTech MSc代做.代写Python程序语言.代写MSc program.代做Python设计帮做C/C++编程|代写R语言Strathclyde Business School, finTe ...
- 做一个好父亲,做一个好丈夫,做一个好女婿,做一个好学生,写一个好博客
人活着会有很多标准在进行评价,为了这些评价,就需要作出时间上和精力上的取舍. 为了做一个好学生,我需要花很多时间在专业上,在论文阅读上,在各种实验上. 为了做一个好丈夫,我需要花很多时间照顾我怀孕8个 ...
- 徐雷:做最好的自己!写在《mongodb实战》第2版和《WCF服务编程》第4版出版之际...
做最好的自己:写在<mongodb实战>第2版和<WCF服务编程>第4版出版之际.很久之前我写过一个类似的文章. 这篇文章写给过去的10.也写给未来的自己. 你是否对自己的未来 ...
- 代做python作业_代做SVC留学生作业、代写Python编程作业、代做Python作业、代写algorithm作业...
代做SVC留学生作业.代写Python编程作业.代做Python作业.代写algorithm作业 日期:2018-12-02 10:26 This project is to be done indi ...
最新文章
- uniapp中遮罩穿透问题
- python输入字母判断大小写_Python-检查输入的数字、大写字母、小写字母和特殊字符...
- 【OkHttp】Android 项目导入 OkHttp ( 配置依赖 | 配置 networkSecurityConfig | 配置 ViewBinding | 代码示例 )
- [Swift]LeetCode468. 验证IP地址 | Validate IP Address
- 开发中常见的十种对缓存的错误使用
- layui列表筛选列_Shopify搜索产品并筛选产品列表功能介绍
- 市值突破3000亿,Fortinet发布2021Q2财报
- mysql max字符串报错_mysql [Warning] max_join_size报错问题解决办法
- [深度学习-TF2实践]应用Tensorflow2.x训练DenseNet模型在Cifar10数据上,测试集准确率90.07%
- 科大讯飞2017年报:营收54亿利润5.9亿,政府补助1.18亿
- 为什么黑客都用python-为什么黑客都用python Python在各领域都有着广
- 人工智能重新定义管理
- 淼淼刷力扣(PTA特别版2)
- 【OHOS】常用命令整理
- python 判断回文数
- 编写一个程序,完成字符大小写的转换。
- JS与jQuery获取任意事件的子元素下标(获取当前类数组的某一子元素下标)
- 2021年危险化学品经营单位主要负责人考试总结及危险化学品经营单位主要负责人考试试题
- 王阳明: <一> 破山中之贼易,破心中之贼难
- AI脚本插件开发-批量加边框-图层边框-可视边界-黑色描边-插件制作源码-illustrator插件开发
热门文章
- P6222 「P6156 简单题」(反演 + 积性函数线性筛)
- P2303 [SDOI2012] Longge(数论/欧拉函数)
- AGC012D - Colorful Balls(并查集)
- JavaWeb --第三章 HTTP协议详解
- 失配树(border树)
- CodeForces 1191A---Tokitsukaze and Enhancement
- [SCOI2007] 修车(费用流 + 差分时间段建图)
- P4451-[国家集训队]整数的lqp拆分【生成函数,特征方程】
- nssl1255-B(轻功)【SPFA,分层图】
- POJ3696-The Luckiest number【数论,欧拉定理】