`

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用法解析

    HTML5移动端开发中,`&lt;viewport&gt;`标签是一个至关重要的元素,它主要负责调整网页在不同设备上的显示方式,尤其在移动设备上。`&lt;meta name="viewport"&gt;`元标签允许开发者精确控制页面的布局视口(layout viewport)、...

    html meta viewport属性说明

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

    图文并茂让你必须弄懂viewport配套示例代码.rar

    【标签】"viewport",作为关键词,表明这个教程的核心内容是关于如何在HTML和CSS中设置和管理视口,包括但不限于`&lt;meta name="viewport" content="..."&gt;`标签的使用,以及其属性如width、initial-scale、minimum-...

    meta标签中的viewport控制设备屏幕css

    在现代Web开发中,针对移动设备的优化是至关重要的,而`&lt;meta&gt;`标签中的`viewport`属性就扮演了这样一个关键角色。`viewport`允许开发者精确地控制网页在不同设备上的展示方式,尤其是智能手机和平板电脑的屏幕。...

    viewport与android的webview

    在移动Web开发中,`viewport` 和 `Android Webview` 是两个至关重要的概念。`viewport` 是一个虚拟的浏览区域,决定了网页在不同设备上的显示方式,尤其是对于智能手机和平板电脑这样的小屏幕设备。而`Android ...

    html5 viewport使用方法示例详解

    HTML5的viewport是一个至关重要的概念,特别是在开发适应各种移动设备的网页或应用时。Viewport是浏览器为呈现网页在小屏幕上创建的一种虚拟视口,它决定了网页的宽度、高度以及缩放行为。对于不同分辨率和屏幕尺寸...

    HTML5 对各个标签的定义与规定:meta

    ### HTML5中的`&lt;meta&gt;`标签详解 在HTML5中,`&lt;meta&gt;`标签被用于定义文档中的元数据,即关于文档的数据。这些元数据不显示在页面上,但会被浏览器解析并用作其他用途,比如搜索引擎优化(SEO)、设置字符集、控制...

    html网页中meta viewport属性说明

    HTML中的`&lt;meta&gt;`标签用于提供元数据,其中`viewport`属性是专为移动设备设计的,它允许网页开发者控制页面在移动设备上的显示方式。移动浏览器通常会在一个虚拟的“视口”(viewport)中渲染网页,这个视口比实际...

    HTML meta viewport属性详细说明

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

    meta viewport标签的使用说明(手机浏览缩放控制)

    meta viewport标签是用于控制移动设备上网页显示效果的HTML标签,它位于网页头部head区域,可以影响移动浏览器的视口(viewport)行为,主要控制页面的宽度、初始缩放比例、缩放的最小与最大比例以及是否允许用户...

    [html5技术]基于bootstrap制作的多标签页(tabs)

    在本教程中,我们将探讨如何利用HTML5和Bootstrap框架来构建一个多标签页(tabs)的界面。 Bootstrap的多标签页功能是通过其Nav组件和Tab插件实现的。Nav组件用于创建导航条,而Tab插件则为这些导航条添加交互性,...

    HTML5head头标签.pdf

    标题中的"HTML5 head头标签"指的是HTML(HyperText Markup Language,超文本标记语言)版本5中用于定义网页头部信息的标签。在HTML文档中,标签内包含了诸如页面元数据(metadata)、链接到样式表、脚本等信息。这些...

    html标签大全标签用法详解

    在HTML中,标签主要分为单标签和双标签。单标签如` `用于换行,`&lt;img&gt;`用于插入图像,它们只有一个开始标签。双标签如`&lt;p&gt;`用于段落,`&lt;h1&gt;`到`&lt;h6&gt;`用于各级标题,它们有开始和结束标签。 段落与标题:`&lt;p&gt;`...

    前端项目-viewport-units-buggyfill.zip

    2. 引入:在HTML文件中通过 `&lt;script&gt;` 标签引入buggyfill的JavaScript文件,通常位于 `dist` 目录下。 3. 初始化:在页面加载完成后,调用buggyfill的初始化函数,例如 `viewportUnitsBuggyfill.init()`。 4. 可选...

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

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

    Ext.Viewport布局

    在给定的代码片段中,我们看到`Ext.Viewport`被用来创建一个具有复杂结构的应用界面,包含`Ext.TabPanel`在内的多个区域。 #### 1. `Ext.Viewport`核心特性与作用 `Ext.Viewport`是一个特殊的布局管理器,其设计...

Global site tag (gtag.js) - Google Analytics