响应式注意要添加“视口”约束标记---viewport
视口:我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980,却和PC屏幕差不多大。原因是苹果主导的这些手机厂商,为了使用户获得完整web体验,很多设备都会欺骗浏览器返回一个数值较大的“视口” ,告诉浏览器,我是想以980px宽度来显示这个页面,iPhone的分辨率为1136*640,三星Note3的分辨率1920*1080,但是分辨率和视口没有系。视口对于我们实现响应式是很不方便的,980太大了,不符合我们心中的期待。我们心中认为手机屏幕尺寸应 该在300-400之间。
所以要添加约束视口:
<meta content="width=device-width, initial- scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" id="viewport"/>
一个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)中是可见的. 带有绿色标记的元素,表示其在当前浏览 ...
最新文章
- python 网络编程之Socket通信案例消息发送与接收
- vb matlab 比较,【笔记】VB.NET和MATLAB读取二进制文件(中文+数值)之比较
- C#精粹,一本都不能少
- 中国最大AI预训练模型发布:113亿参数!北京智源研究院、阿里、清华等联手打造
- 算法----返回Excel相应的列序号
- Android Studio 本机调试
- Java读取Excel文件并将之写入数据库操作
- java数组的四个要素_Java零基础系列教程04Java数组
- 公交查询系统 c语言,城市公交查询系统的设计任务书
- IOS UIScrollView 滚动视图的使用和文档
- APMServ5.2.6 升级php5.2 到 5.3版本及Memcache升级!
- react-native与原生三种交互模式
- object C—类中函数的调用
- 常见的三种Content-Type
- 30 System类
- Raki的读paper小记:Sources of Transfer in Multilingual Named Entity Recognition
- 汉字一级字库与二级字库
- 收银机收款机USB通讯接口(341驱动) 可以用于客显 小票打印机
- iphone双重认证关闭不了怎么办_怎么关闭iPhone双重认证?苹果手机关闭双重认证的两种操作方法 ... ......
- 小米 linux 内核面试,编译适配小米2S的CM Linux内核源代码及问题解决
热门文章
- 大连网络推广明确做好网站标题优化对网站排名的提升影响
- 网络营销外包——网络营销外包公司如何做好电子商务网站优化?
- excel文件直接双击打不开_实用电脑技巧excel 电脑办公技巧500招 高级电脑技巧
- ros 消息队列与缓冲区_[ROS] [笔记(1)] 一个最简单的例子:Hello Robot(消息、发布者与订阅者)...
- vant图标怎么显示不出来_U盘插进电脑但不显示怎么解决
- iso镜像添加软件包_Linux如何挂载镜像文件【新手必看】
- sql中ifnull不生效_数据科学家常见的5个SQL面试问题
- PowerShell攻防进阶篇:nishang工具用法详解
- HashTree(哈希树) ——和trie类似,只是将字符换成了质数,sphinx用到了???...
- 美化浏览器的radio和checkbox样式