网页宽度自动适应手机屏幕宽度的实现代码(viewport)
发布时间:2015-08-11 15:18:20 作者:佚名 我要评论
这篇文章主要介绍了网页宽度自动适应手机屏幕宽度的实现代码,需要的朋友可以参考下
一般的写法如下:
XML/HTML Code复制内容到剪贴板
- <meta name="viewport" content="initial-scale=1.0">
较多的写法:
XML/HTML Code复制内容到剪贴板
- 1.<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:
复制代码
代码如下:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。
相关文章
像素密度与CSS3的viewport在移动端Web响应式布局中的运用
viewport是CSS3中调整缩放的利器,特别适用于移动端Web界面的操作与布局,接下来我们就来详解像素密度与CSS3的viewport在移动端web响应式布局中的运用.2016-05-27HTML5移动端开发中的Viewport标签及相关CSS用法解析
这篇文章主要介绍了HTML5移动端开发中的Viewport标签及相关CSS用法解析,Viewport常被叫做视口或视区,在移动端布局和屏幕适配中有着重要的作用,需要的朋友可以参考下2016-04-15- 这篇文章主要介绍了CSS3中视窗单位Viewport的常见用法,包括视窗的高度宽度及垂直居中等基本设定方法,需要的朋友可以参考下2016-02-04
- meta标签中的viewport可以控制设备屏幕的高度、宽度、初始的缩放比例等等,喜欢的朋友可以了解下2014-08-22
- meta标签中的viewport可以设置屏幕的css样式,包括宽、高、初始缩放比例等等2014-07-28
- 这篇文章主要介绍了html网页中meta viewport属性说明,需要的朋友可以参考下2014-05-07
- 这篇文章主要介绍了html的meta viewport属性说明,需要的朋友可以参考下2014-04-16
- viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport,下面为大家详细介绍下HTML meta viewport2014-03-12
- 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不2013-12-02
- 在需要调整设备浏览器的viewport时,我们通常在HTML中使用来解决。但是令人意想不到的是,viewport meta标签并不具有“规范性”,即它不是W3C的正式标准,也非Web标准2013-11-10
最新评论