响应式web----viewport
来源:互联网 发布:ddos攻击防御软件 编辑:程序博客网 时间:2024/06/06 06:03
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
- width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
0 0
- 响应式web----viewport
- 【响应式web设计(二)】视口(viewport)
- 响应式Viewport详解
- 响应式viewport
- 响应式Web设计:Media Queries和Viewport的困惑
- viewport实现响应式设计
- 响应式开发之viewport
- WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport
- 响应式Web设计:Media Queries和Viewport的区别和用法
- 响应式布局1之viewport
- 响应式布局基础二:设置viewport
- 响应式布局----像素密度与viewport
- CSS3响应式布局meta viewport属性
- Web-viewport
- 响应不同分辨率ViewPort
- 非响应式设计也可以用Viewport Meta标签
- 移动端开发-viewport实现响应式设计
- 为响应式布局而生的viewport
- Android UI集锦——1.Android Drawable分类汇总(2/3)
- 19-mysql优化之定时维护
- Atitit 文件上传 架构设计 实现机制 解决方案 实践java php c#.net js javascript c++ python
- Android UI集锦——1.Android Drawable分类汇总(3/3)
- Android UI:PopupWindow基本学习
- 响应式web----viewport
- 智能监控效果图
- Automatic and No automatic
- IOS shareSDK 集成引入库以及问题
- Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构
- ST-Link驱动安装不正确,设备管理器黄色感叹号,win10安装stlink驱动
- RESTful Web API 具有怎样的特征
- Swift访问Foundation框架
- New UI-带图片(drawableXxx)的TextView