响应式Web设计- Viewport
什么是Viewport?
viewport是用户网页的可视区域, 翻译为中文可以叫做"视区"。
设置Viewport
一个常用的针对移动网页优化过的页面的Viewport meta设置如下:
<meta name="viewport" content="width=device-width,height=device-height, initial-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:用户是否可以手动缩放。
响应式Web设计- Viewport的更多相关文章
- 响应式 Web 设计 - Viewport 和手机变框变粗的问题
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: <meta name="viewport" content="width=devi ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- 如何通过CSS3 实现响应式Web设计
如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- 初探响应式Web设计
公司书柜有本<响应式Web设计:HTML5和CSS3实战>,大概就认真看了前面几章,后面大部分介绍css3(随便找本手册都可以了要你可用!) <响应式Web设计:HTML5和CSS3 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
随机推荐
- Luogu P4892 GodFly的寻宝之旅【状压dp】By cellur925
题目传送门 又是一道状压+计数类好题hh(真香).数据范围非常友好,告诉我们\(n<=18\),非常符合状压的性质. 其实感觉和\(Hamilton\)路径那题还是有些相似的,我们可以类似地设计 ...
- spring框架——依赖注入
依赖注入:DI 又称控制反转:IoC 项目名字spring_DI 一.implement包中定义了两个接口Food和Person 1.接口Food package org.interfaces; pu ...
- linux 和windows 的定时任务
linux http://www.cnblogs.com/thinksasa/archive/2013/06/06/3121030.html windows http://www.myhack58.c ...
- (转)关于MongoDB你需要知道的几件事
本文列举了颇让作者困惑的一些MongoDB限制,如果你也打算使用MongoDB,那么至少要提前了解这些限制,以免遇到的时候措手不及. 消耗磁盘空间 这是我的第一个困惑:MongoDB会消耗太多的磁盘空 ...
- lucene原理及java实现
https://blog.csdn.net/liuhaiabc/article/details/52346493 https://blog.csdn.net/yang307511977/article ...
- 测试 | Mock object
实例: 一个简单的图书管理系统包括三个类: Book提供了书籍的定义 BookService提供了有关书籍借阅和归还的服务 BookMananger查找书籍并把对书籍状态的更改更新到数据库中 目前,B ...
- iphone、ipad等网页中电话号码呈蓝色的解决方案
iPhone手机.ipad上的浏览器(如Safari),在解析网页的时候会自动给 像是电话号码的数字 加上link样式,所以号码呈蓝色. 可以添加下面的meta禁用掉这个功能. <meta na ...
- Docker容器与容器数据
Docker容器与容器数据 image 与container 镜像(Image)和容器(Container)的关系,就像是面向对象程序设计中的 类 和 实例 一样,镜像是静态的定义,容器是镜像运行时的 ...
- 基于.NET网页开发的工作,需要掌握的知识点
学习计划对于程序员来说尤为重要,我最近根据自己的职业规划和招聘网站上对于基于.NET网页开发工作所需要的技能做出了一个总结,这个总结的内容也将是自己最近一年的知识补充和学习的方向,各位园友也可以把它作 ...
- webApi Authentication failed because the remote party has closed the transport stream\身份验证失败了,因为远程方关闭了传输流。
public class CertificateTrust { public static void SetCertificatePolicy() { //当在浏览器中可以正常访问,而code中出现错 ...