HTML5之viewport使用

好久都没更新博客了,最近一年转型移动端,当然网页端也得兼顾,慢慢写一写基本性的文章,多积累。

本期介绍下viewport的一些使用:

先看看viewport在页面中的样子:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,窗口可大于或小于手机的可视区域,一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。

时间: 2024-08-25 04:03:32

HTML5之viewport使用的相关文章

HTML5之Viewport详解

做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜有很多.记录一些自己理解的内容: Viewport属性详解 Viewport:字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出)这样利于移动 web 站点跨设备显示效果基本一致. 基础写法: <meta name="viewport"

html5的viewport与css3的媒体查询

伴随着移动设备的越来越流行,在现代社会中,可能人们手中握着移动设备的时间已经远远大于敲着键盘了,还有各种平板及未来会不断兴起的移动设备,如何让网页在这些设备上更好的显示,成为我们不断学习.思考的问题. css的媒体查询创建的响应式网站,就是针对这一问题的. 其实在css2已经支持媒体,在新的css3中更加的具体,让我们能够更好的书写代码,以保证网页在不同设备上的布局的合理,使UI显示的更加的精致和优美.下面我们来举个栗子吧: <link mete="not screen and (widt

html5中viewport与meta详解

网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分.移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持. <meta name="viewpor

HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容

要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足浏览区的内容区域. HTML5 的 viewport 标签中的 content="width=device-width, initial-scale=1.0" 可以使图片的宽度自适应移动端设备的宽度,且初始缩放比例为1: CSS3 的 background-size:contian 把图像

cocos2d-js 入门 (主要是HTML5)

cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台. 利用cocos2d-js开发HTML5游戏/动画,我们可以通过SDK也可以直接使用js类库: l SDK下载:http://cn.cocos2d-x.org/download/ l js类库:http://www.cocos2d-x.org/filecenter/

No-Transform协议禁止搜索引擎转码兼移动站建设问答

No-Transform协议禁止搜索引擎转码兼移动站建设问答技术 maybe yes 发表于2014-12-29 13:42 原文链接 : http://blog.lmlphp.com/archives/51  来自 : LMLPHP后院 在 手机端访问时,发现自己的站点经常被百度,360等搜索引擎转码展示.转码后发现网页质量不太好,很多功能都出问题了.本人也是非常讨厌这种无声无息的动 作,之前在站长沙龙上看到过一些问答,有关于如何禁止搜索引擎转码网页的问题,需要加上一段代码.我就是后知后觉的那

[转][译]ASP.NET MVC 4 移动特性

此教程将讨论ASP.NET MVC 4 Web应用程序里的移动特性.对于此教程,可以使用 Visual Studio Express 2012 或者 Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer 或者 VWD").  如果你已经有了专业版本的 Visual Studio 你也可以使用. 开始之前,确保你已经安装了以下列出的必需项. Visual Studio Express 2012 (推

移动应用开发之自适应布局与单位(px、em)选择

移动应用开发中自适应布局是非常重要的,因为不同设备分辨率不一样,大小也不一样,不采用自适应布局在不同的设备中显示会出现各种问题 能够起到自适应布局的方法 CSS3中的自适应布局 百分比布局法:即大小,位置,边距等用百分比来限制,能够在不同的设备中占据总体的布局一致 webkit-box结合-webkit-box-flex布局法:使用webkit-box能够实现弹性盒子模式布局,结合-webkit-box-flex能够实现将屏幕完全分割的布局,与半分比不同的是:百分比布局在存在border的时候不

2016.3.16__HTML5新特性__第八天

HTML 5 + CSS 3 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 今日代码非常冗杂,所以非常多内容直接摘自网上,假设造成您的不适.请留言告知. 非常感谢. 输入标签,通用标签和全局属性今日不做很多其它阐述,日后使用中遇到再另行说明. 1. HTML 5 新特性 今日课程预览 1.1 结构标签 1.1.1 <article> 标签 <article> 标签定义独立的内容. <article> 标签定义的内容本身必须是有意义的且必须是独立于