移动设备样式之媒体查询HTML5
有一种目标如java一样,一次编写到处运行,在移动设备流行的当下,有木有可能只实现一套页面,就能够在所有平台的浏览器下访问网站,显示适合的效果呢?答案是肯定的
HTML5带来了希望,使用Viewport及Media Queries样式模块
1.什么是viewport
Apple为了解决移动版Safari的屏幕分辨率大小问题,专门定义了viewport虚拟窗口。它主要作用是允许开发者创建一个虚拟的窗口,并自定义其窗口的大小或缩放功能。
如果开发者没有定义这个虚拟窗口,移动版safari的虚拟窗口默认大小为980像素。目前除了safari浏览器外,其他浏览器也支持viewport虚拟窗口,但不同浏览器对viewport窗口的默认大小支持都不一致,默认值分别如下:
Android Browser浏览器的默认值是800像素
safari浏览器默认值是980像素
IE浏览器默认值是974像素
opera浏览器默认值是850像素
2.如何使用viewport?
viewport虚拟窗口是在meta元素中定义的,其主要作用是设置web页面适应移动设备的屏幕大小。
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=0″/>
代码作用是自定义虚拟窗口,并指定虚拟窗口width宽度为device-width,初始缩放比例大小为1倍,同时不允许使用手动缩放功能
自iphone面世以来,其屏幕的分辨率一致维持在320*480,由于Apple在加入viewport时,基本上使用width=device-width的表达方式来表示iphone屏幕的实际分辨率大小的宽度,其他浏览器厂商在实现其viewport的时候也兼容了device-width这样的特性
content属性允许设置6种不同的参数,分别如下:
width指定虚拟窗口的屏幕宽度大小
height指定虚拟窗口的屏幕高度大小
initial-scale指定初始缩放比例
maximum-scale指定允许用户缩放的最大比例
minimum-scale指定允许用户缩放的最小比例
user-scalable指定是否允许手动缩放
相关推荐
页脚网页 <br><br>9.8.3 浮动窗口网页 <br><br>9.8.4 可伸展网页 <br><br>9.9 通用站点外观之路 <br><br>9.10 小结 <br><br>第10章 文本 <br><br>10.1 媒体情况 <br><br>10.1.1 用图形控制文本 <br><br>10.1.2 举起...
页脚网页 <br><br>9.8.3 浮动窗口网页 <br><br>9.8.4 可伸展网页 <br><br>9.9 通用站点外观之路 <br><br>9.10 小结 <br><br>第10章 文本 <br><br>10.1 媒体情况 <br><br>10.1.1 用图形控制文本 <br><br>10.1.2 举起...
4<br><br>0008 为程序设置版本和帮助信息 4<br><br>0009 设置Windows应用程序启动窗体 5<br><br>0010 设置Web应用程序起始页 5<br><br>0011 如何设置程序的出错窗口 5<br><br>0012 如何进行程序调试 6<br>...
<br><br><br>更多介绍:<br>1,性能方面,使用最优化的算法和数据结构设计,从字段到表的分配,索引的构建,都经过缜密的考虑,每一条数据库查询语句都经过严格的跟踪和测试和优化。允许超过上亿人注册和万人以上...
媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...
《HTML5开发手册》总共分为15章,先后讲解了HTML5中新增的元素、浏览器对HTML5的支持、CSS3中的新布局和样式、HTML5 Web表单、多媒体技术、地理定位API、客户端存储、WebSocket API,以及集成设备数据等内容。...
Spimes主题专为博客、自媒体、资讯类的网站设计开发,自适应兼容手机、平板设备。 一款简约新闻自媒体类的 typecho 主题,设计上简约、干净、精致、响应式,后台设置更是强大而且实用的新闻自媒体类主题。 前端...
spimes主题专为博客、自媒体、资讯类的网站设计开发,自适应兼容手机、平板设备。一款简约新闻自媒体类的 typecho 主题,设计上简约、干净、精致、响应式,后台设置更是强大而且实用的新闻自媒体类主题。 PS:5.0...
第5章(源代码\第5章) 示例描述:本章演示图像标记的用法 alt用法.html 图像参数alt用法。 插入图像.html 演示插入图像。 热点链接.htm 热点链接的用法。 图片链接边框设置.html 图片链接...
前端功能 响应式设计,兼容手机和平板等移动设备; 多样化的用户等级成长标志 ...一款简约新闻自媒体类的 typecho 主题,设计上简约、干净、精致、响应式,后台设置更是强大而且实用的新闻自媒体类主题。
Spimes主题专为博客、自媒体、资讯类的网站设计开发,自适应兼容手机、平板设备。 一款简约新闻自媒体类的 typecho 主题,设计上简约、干净、精致、响应式,后台设置更是强大而且实用的新闻自媒体类主题。 前端...
7. 移动端开发:针对移动设备的浏览器进行优化,使用 HTML5 和 CSS3 等技术开发适配移动设备的网页和应用程序。 8. 前端框架:如 Vue.js、React、Angular 等,提供了一种开发模式和工具集,用于快速构建
拼图前端框架介绍拼图 Pintuer:国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小...
而对于新的移动平台,则可以展现像安装在设备中的应用程序一样出色的富媒体和交互的浏览体验 6自动初始化 通过页面的html标签的data-role 属性,Jquery Mobile可以自动初始化相应的插件 7优秀的可访问性 一些特性...
使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端...
拼图 Pintuer:中国版的Bootstrap,是国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用...
工具通过HTML5嵌入视频,可以广泛地支持移动设备,如iPhone,ipad或Android手机等。您也不必担心兼容旧浏览器的问题,因为它设置了回避不支持HTML5元素的功能。 集成ZOO Widgetkit和ZOO可以相互桥接!这是我们被要求...