meta viewport 详解

ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么。使用ViewPort <meta>标记还表示文档针对移动设备进行了优化。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。

<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>

width和height:

指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

user-scalable:

令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。

initial-scale:

指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

maximum-scale和minimum-scale:

指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。

所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。

时间: 2024-10-17 20:23:16

meta viewport 详解的相关文章

Meta标签详解

Meta标签详解,在网上转的,希望对大家有用 引言 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站的链接 ● 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区

meta标签详解(meta标签的作用)///////////////////////////转

meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站的链接 ● 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的MET

HTML中META属性详解 转载自 hero_213的博客

HTML中META属性详解 meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta   http-equiv= "content-Type "   content= "text/html;   charset=gb2312 "> </head>         也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加

关于移动web页面viewport详解

这种方式做的移动Web页面,设计稿通常是按照960*640的规格进行设计,再开发的时候,通常会把里面量到的尺寸缩小一半再开发. 移动web端页面设置详解 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/> 涉及到了移动设备(ios, android)的屏幕尺寸问题,d

HTML5之Viewport详解

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

网页设计:Meta标签详解

很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息.meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie:它可以用于鉴别作者,设定页面格式,标注内容提要和关键字:还可以设置页面使其可以根据你定义的时

移动前端第一弹:viewport详解

前言 这次想聊聊移动开发相关的事.是的,你没有看错,一句话就可以开始你的移动前端开发. 你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界. 但其实它一点也不新奇,不复杂. viewport简介 没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为. 该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进. 举个简单的例子来讲为什么会需要它: 我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也

手机端的几个meta属性详解

(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /> (2)<meta content="yes" name="apple-mobile-web-app-capable" /> (3)<meta content="bla

meta标签详解:源http://blog.csdn.net/kongjiea/article/details/17092413

一.大众机型常用meta标签name的设置 1.name之viewport <meta name="viewport" content=""> 说明:屏幕的缩放 content的几个属性:     width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持:     height – viewport 的高度 (范围从 223 到 10