响应式注意要添加“视口”约束标记---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)中是可见的. 带有绿色标记的元素,表示其在当前浏览 ...
最新文章
- 第一个DNN 模块PictureGallery已经完成
- VTK:图片之Flip
- javacript 裁切图片
- 精确覆盖DLX算法模板
- python画两条曲线_python – 在Matplotlib中绘制两个图之间的线
- JAVA只要掌握内部类,多继承和单继承都不是问题
- 【SpringCloud】Spring cloud Alibaba Sentinel 服务降级 (阿里版本Hystrix)
- python文件操作的方法_python中文件操作的基本方法
- xilinx sdk用alt+?进行自动补全
- java-jdk环境下载
- V-rep学习笔记:转动关节1
- 数据库mysql视频马士兵,马士兵mysql视频的个人笔记
- yolov3的loss计算公式
- CAJ格式文献转成PDF格式
- 手把手教你mockjs实际项目快速搭建
- 2021年2月28日【Jiawei_Z】Ethercat的整个实现过程(举例:Lan9252)
- python爬取网易云音乐排行榜数据
- iPad,iPad Pro和iPad Mini有什么区别?
- 3dmax顶点动画导入unity_3DMAX点缓存的动画怎么导入unity呀?
- 微服务全链路灰度新能力
热门文章
- mysql空表不导出问题_解决Oracle 11g空表无法导出的问题
- go 函数参数nil_go内置函数make
- html canvas抽奖,HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
- 网站功能页面构建有何技巧?
- xml 里设置变量_[技巧] ApiPost操作设置
- 计算机多媒体理论知识,计算机多媒体技术07311.doc
- python办公自动化excel_简直出神入化,教你用Python控制Excel实现自动化办公
- Android 机型适配之gradient默认渐变方向
- (转载)解决umount: /home: device is busy
- scrapy 6023 telnet查看爬虫引擎相关状态