视口:我们试图在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相关推荐

  1. 前端笔记之移动端响应式(中)视口百分比布局弹性盒模型remfillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  2. 【转载】前端笔记之移动端响应式(中)视口百分比布局弹性盒模型remfillpage...

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  3. vue给对象(数组)添加属性的时候,无法达到响应式的效果,页面无法即时更新

    当我们给对象或者数组添加一个属性的时候,会发现通过打印,可以在控制台看见数据已经更新,但是页面却没有成功渲染上. <template><div class="main-la ...

  4. 响应式Web设计读书笔记与实践

    前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,<无懈可击的Web设计>和<响应式Web设计>,前者没有买到纸 ...

  5. Vue3.0源码解读 - 响应式系统

    一.目标对象标识 ** 类似于渲染系统,vue3.0的响应式系统也有自己的一套flag,用于标记目标对象target(通常是我们传入的数据源)的一些特性 export const enum React ...

  6. 大二 mysql高级+html响应式+Java高级50道试题

    1.CSS3中过渡属性 transition-timing-function的值包括哪些 A. ease B. inline C. ease-in D. easeout 答案:A,C 解析:过渡属性 ...

  7. 【Bootstrap】响应式原理和设计

    响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是 ...

  8. 【Vue.js源码解析 一】-- 响应式原理

    前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 课程目标 Vue.js 的静态成员和实例成员初始化过程 首次渲染的过程 数据响应式原理 – 最核心的特性之一 准备工作 ...

  9. Bootstrap响应式测试用例

    测试用例 调整你的浏览器窗口大小,或者用其他设备打开页面,都可以测试这些响应式工具类. 带有绿色标记的元素,表示其在当前浏览器视口(viewport)中是可见的. 带有绿色标记的元素,表示其在当前浏览 ...

最新文章

  1. 第一个DNN 模块PictureGallery已经完成
  2. VTK:图片之Flip
  3. javacript 裁切图片
  4. 精确覆盖DLX算法模板
  5. python画两条曲线_python – 在Matplotlib中绘制两个图之间的线
  6. JAVA只要掌握内部类,多继承和单继承都不是问题
  7. 【SpringCloud】Spring cloud Alibaba Sentinel 服务降级 (阿里版本Hystrix)
  8. python文件操作的方法_python中文件操作的基本方法
  9. xilinx sdk用alt+?进行自动补全
  10. java-jdk环境下载
  11. V-rep学习笔记:转动关节1
  12. 数据库mysql视频马士兵,马士兵mysql视频的个人笔记
  13. yolov3的loss计算公式
  14. CAJ格式文献转成PDF格式
  15. 手把手教你mockjs实际项目快速搭建
  16. 2021年2月28日【Jiawei_Z】Ethercat的整个实现过程(举例:Lan9252)
  17. python爬取网易云音乐排行榜数据
  18. iPad,iPad Pro和iPad Mini有什么区别?
  19. 3dmax顶点动画导入unity_3DMAX点缓存的动画怎么导入unity呀?
  20. 微服务全链路灰度新能力

热门文章

  1. mysql空表不导出问题_解决Oracle 11g空表无法导出的问题
  2. go 函数参数nil_go内置函数make
  3. html canvas抽奖,HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
  4. 网站功能页面构建有何技巧?
  5. xml 里设置变量_[技巧] ApiPost操作设置
  6. 计算机多媒体理论知识,计算机多媒体技术07311.doc
  7. python办公自动化excel_简直出神入化,教你用Python控制Excel实现自动化办公
  8. Android 机型适配之gradient默认渐变方向
  9. (转载)解决umount: /home: device is busy
  10. scrapy 6023 telnet查看爬虫引擎相关状态