页面自适应<meta name="viewport">标签设置

viewport:

它在页面中设置,是应对手机模式访问网站、网页对屏幕而做的一些设置。通常手机浏览器打开页面后,会把页面放在一个虚拟的“窗 口”–这个比窗口大,也就是你常发现页面可以进行拖动、放大放小,这个窗口即viewport,meta的这个viewport属性基本所有手机浏览器皆支持。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

content属性值 :

  • width: 可视区域的宽度,值可为数字或关键词device-width;
  • height: 同width;
  • intial-scale: 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放;
  • maximum-scale=1.0, minimum-scale=1.0; 可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
  • user-scalable: 是否可对页面进行缩放,no 禁止缩放
时间: 2024-08-08 08:36:21

页面自适应<meta name="viewport">标签设置的相关文章

移动端web页面开发常用的头部标签设置

在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> initial-scale属性控制页面最初加载时的缩放等级.maximum-scale.m

移动端页面 viewport的设置,横屏字体重置的问题

在最初做的时候因为一直没有在手机上实测页面,导致后来写了好些页面后实测发现页面特别小,几乎都看不见. 原因是每个移动设备都是自己默认的视口宽度. 视口:在移动端浏览器当中有两种视口:可见视口(设备屏幕大小)和浏览器视口(网页宽度). 拿iphone4s来说,它的屏幕是320*480的,但是它却能展示980像素宽度的内容(iphone默认都是980),所以你把网页放到移动端展示就相当于缩小了980/320.手机这样做的目的是可以显示更多的东西,但是结果就是在PC端做好的页面到了移动端就像蚂蚁一样小

html - &lt;meta name=&quot;viewport&quot; content=&quot;XX&quot;/&gt; 标签常见属性及说明

<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 :表示宽度是设备屏幕的宽度 height=device-he

html5-使用meta的viewport控制页面与设备保持一致宽度

时间:2016-5-19作者:独享奢华 使用Html5开发移动端页面时,为了使页面不在用户缩放后变形,使其保持跟App一样具有固定的视觉,则可以添加meta的viewport 用以控制页面的宽度为设备宽度和缩放比例保持为1倍原始大小. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 各个参数项

在HTML中增加meta name=&quot;viewport&quot;控制页面不随着放大缩小变形的实现方式

PC端添加以下meta内容: <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> .... </head> 2. Mobile端添加以下meta内容: <head> <meta name="

微信公众平台开发 - 页面自适应

通过以下标签实现页面自适应: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [ye

移动端H5页面自适应手机屏幕宽度

1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem.sublime-settings文件. 设置px_to_rem的值为75即可. 在代码里输入设置的对应px值,按TAB键就可以转换为rem 在使用时,同事引用flexible.js文件 2.<meta name="apple-mobile-web-app-capable" cont

页面自适应问题

自适应网页设计的概念和方法,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里简要的整理一下. 1.在HTML头部增加viewport标签. 在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放.代码如下: <meta name="viewport" content="width=device-width, initial-scale=1" />

移动页面自适应手机屏幕宽度

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max