响应式布局基础二:设置viewport
来源:互联网 发布:专升本网络教育要多久 编辑:程序博客网 时间:2024/05/17 01:20
在开发PC端的网站的时候,我们通常需要根据屏幕分辨率的大小,通过css的媒体查询,设置响应的像素大小。
在开发手机网站的时候,通常也需要这样设置的。但是在手机端,还需要多设置viewport这个元素。
viewport元素通常是用来设置页面的大小和缩放比例的。
手机浏览器为了更好地展示这些没有没有为手机设计的网站,通常会使用桌面的宽度来渲染(通常是960px,980px),然后再改变字体的大小和对内容的缩放来使内容适应屏幕。用户通常访问这些网站,需要自己去缩放网站。(这对用户体验真糟糕!)
<meta name="viewport" content="width=device-width, initial-scale=1">
通过上面的语句,便能设置网站的宽度为设备的宽度(不再是手机浏览器自己设置的960px了),然后又让网站的缩放比例为不缩放。(通常还设置user-scalable为no,禁止用户自己缩放比例)。
效果图:
上图中,第一次访问网站,由于没有设置viewport,用户需要自己缩放网页,才能看清内容(用户体验,差!)
第二次访问的网页,由于有设置viewport,用户直接就可以查看网页内容,用户体验比第一个好多了!(赞!)
参考资料:https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en
0 0
- 响应式布局基础二:设置viewport
- WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport
- 响应式布局1之viewport
- 响应式布局----像素密度与viewport
- CSS3响应式布局meta viewport属性
- 【响应式web设计(二)】视口(viewport)
- 为响应式布局而生的viewport
- 响应式布局二
- 响应式web----viewport
- 响应式Viewport详解
- 响应式viewport
- viewport/流式布局
- 响应式布局基础三:webapp布局
- 移动端响应rem dpr viewport设置
- viewport实现响应式设计
- 响应式开发之viewport
- viewport和流式布局
- 响应式布局初设(二)
- 自定义流水布局(实现相册功能)
- 2754: [SCOI2012]喵星球上的点名 AC自动机+map
- iOS基础概念
- Eclipse全键盘编码攻略之一——入门
- 深入理解Angular依赖注入
- 响应式布局基础二:设置viewport
- Windows 下 MySQL 5.7.9 安装教程
- 利用javascript实现从某年到当前年的下拉列表框
- 消息队列------Redis
- log4j 在控制台打印 mybatis 的 sql 语句的配置
- 深入探讨 Java 类加载器 https://www.ibm.com/developerworks/cn/java/j-lo-classloader/
- Spark源码分析之七:Task运行(一)
- CentOS6.5虚拟机下搭建Hadoop伪分布式环境
- Bootstrap v2.3.1 进度条设置设置进度