响应式注意要添加“视口”约束标记---viewport

视口：我们试图在iPhone中输出屏幕宽度，你会发现屏幕宽度是980，却和PC屏幕差不多大。原因是苹果主导的这些手机厂商，为了使用户获得完整web体验，很多设备都会欺骗浏览器返回一个数值较大的“视口” ，告诉浏览器，我是想以980px宽度来显示这个页面，iPhone的分辨率为1136*640，三星Note3的分辨率1920*1080，但是分辨率和视口没有系。视口对于我们实现响应式是很不方便的，980太大了，不符合我们心中的期待。我们心中认为手机屏幕尺寸应该在300-400之间。

所以要添加约束视口：

一个id 和name 为viewport 的meta 元标记，就表示现在要约束视口了，具体约束规则，写在content 中，每个约束规则，用逗号隔开。

width=device-width : 命令视口的宽度，变为设备的宽（以1024*768 屏幕为标准，iPhone 等手机通常为320-380 之间不等。）
initial-scale=1.0 : 命令视口默认的缩放等级为1
minimum-scale=1.0 : 命令视口最小缩放等级为1
maximum-scale=1.0 : 命令视口最大缩放等级为1
user-scalable=no : 不允许用户缩放页面

加上了meta视口约束标记之后，iPhone的视口宽度就是320px.

* 所有的手机响应式界面，都要记得加上 meta viewport视口约束标记！！！
用JavaScript测试页面宽度，更改样式表,这是一个IE6兼容的写法。

转载于:https://www.cnblogs.com/xfx0725/p/5678533.html

响应式注意要添加“视口”约束标记---viewport相关推荐

前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
【转载】前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新
当我们给对象或者数组添加一个属性的时候,会发现通过打印,可以在控制台看见数据已经更新,但是页面却没有成功渲染上. <template><div class="main-la ...
响应式Web设计读书笔记与实践
前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,<无懈可击的Web设计>和<响应式Web设计>,前者没有买到纸 ...
Vue3.0源码解读 - 响应式系统
一.目标对象标识 ** 类似于渲染系统,vue3.0的响应式系统也有自己的一套flag,用于标记目标对象target(通常是我们传入的数据源)的一些特性 export const enum React ...
大二 mysql高级+html响应式+Java高级50道试题
1.CSS3中过渡属性 transition-timing-function的值包括哪些 A. ease B. inline C. ease-in D. easeout 答案:A,C 解析:过渡属性 ...
【Bootstrap】响应式原理和设计
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是 ...
【Vue.js源码解析一】-- 响应式原理
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读课程目标 Vue.js 的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理 – 最核心的特性之一准备工作 ...
Bootstrap响应式测试用例
测试用例调整你的浏览器窗口大小,或者用其他设备打开页面,都可以测试这些响应式工具类. 带有绿色标记的元素,表示其在当前浏览器视口(viewport)中是可见的. 带有绿色标记的元素,表示其在当前浏览 ...

响应式注意要添加“视口”约束标记---viewport

响应式注意要添加“视口”约束标记---viewport相关推荐

最新文章

热门文章