`

html5中的Viewport的标签解释

 
阅读更多
下面这句代码在iPhone的浏览器中将以原始大小显示,并不允许缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其中:
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

注:此标签在iphone4和ipad均可以到缩放作用,但是在Android的WebView却不支持

<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />


<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
分享到:
评论

相关推荐

    HTML5移动端开发中的Viewport标签及相关CSS用法解析

    一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网页基本...

    html meta viewport属性说明

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...

    html网页中meta viewport属性说明

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...

    HTML meta viewport属性详细说明

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...

    HTML5 移动页面自适应手机屏幕四类方法总结

    1、使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及...viewport标签极其属性: 复制代码代码如下: &lt;meta name=”vi

    利用css @viewport 做设备适配

    Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率,使得viewport meta标签被广泛...

    移动端html5 meta标签的神奇功效

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?...

    meta viewport使网页在iPhone中满屏显示控制

    打开Opera, 看源码在HTML头发现了meta viewport,难道是这个家伙在发挥作用吗? 加上试试,果然满屏了。顺便去查了一下这个标签的作用,记录一下,方便以后 使用。 meta viewport &lt;meta name=”viewport” ...

    html中meta标签及用法详解

    Html中meta标签 一、meta标签 含义  &lt;meta&gt; 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。  &lt;meta&gt; 标签位于文档的头部,不包含任何内容。  &lt;...

    Responsive-Portfolio:随着我在UCF的计算机编程BootCamp中完成学习的过程,将在CSS Projects和Bio中使用媒体查询构建新的View-Port-Responsive产品组合。-源码

    要求index.html骨架Portfolio.html骨架contact.html骨架(共3个ViewPort标签) style.css 常规样式参数媒体查询参数(在样式表的底部) 980px 768像素640像素资产文件夹CSS文件夹图片文件夹正在图像文件夹中使用的...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    然而,由于HTML5的W3C标准规范还未制定,安卓系统中类浏览器Webview自身存在一些局限性,因此仍存在着诸多问题亟需解决,包括:(1)多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而...

    HTML5触摸界面设计与开发

    《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。...

    HTML head 头标签详细介绍

    HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO ...DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

    如何基于viewport vm适配移动端页面

    标签中viewport的值,给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值,然后就运用rem单位开发可以等比例缩放的H5页面。 但是!Flexible已经完成了他自身的历史使命,我们...

    html 调 用 摄 像 头

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照。...首先,我们要允许网页宽度自动调整,我们在网页头添加viewport标签:

    深入浅出meta标签

    通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。 1、viewport XML/HTML Code复制内容到剪贴板 &lt;...

    iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

    需要我们自己去写一个HTML5标签进行整合,(相当于重新写了一个HTML页面) :ok_hand:那就没办法了,我就自己写一个标签咯,应该不难吧。嘻嘻嘻嘻~~~~~ dispatch_async(dispatch_get_main_queue(), ^{ if(self....

Global site tag (gtag.js) - Google Analytics