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

  1. 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="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

.....

</head>

说明：

target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi 为设备原本的DPI值，不会有任何缩放。

width=device-width，指定屏幕宽度，device-width设备屏幕的宽度。

时间： 2024-07-30 19:13:13

在HTML中增加meta name="viewport"控制页面不随着放大缩小变形的实现方式的相关文章

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"/> 各个参数项

如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入

css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode 属性时相同active : 指定所有使用ime输入的字符.即激活本地语言输入法.用户仍可以撤销激活imeinactive : 指定所有不使用ime输入的字符.即激活非本地语言.用户仍可以撤销激活imedisabled : 完全禁用ime.对于有焦点的控件(如输入框),用户不可以激活ime 说明:设

meta标签viewport的深入理解（转）

移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又

js控制页面跳转,清缓存，强制刷新页面

单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. 直奔code... 解决办法: 在HTML中埋入隐藏from,通过js调用from进行请求链接地址 <form id='hidden_submit_info' method="post" enctype="multipart/form-data" action=

&lt;head&gt;中&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initical-scale=1&quot;的作用&gt;

<meta name="viewport" content="width=device-width,initical-scale=1"的作用> content属性值 : width:可视区域的宽度,值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域

html中的meta详解

1  name=viewport <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 1.width :控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素) 2.height :

使用视 meta 标签来控制手机浏览器布局

移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看到页面的不同区域. 移动Safari浏览器推出了"视口元标记",让Web开发人员控制视口的大小和规模.许多其他移动浏览器都支持这个标签,虽然它不是任何Web标准的一部分.苹果公司的文档做得很好解释如何Web开发人员可以使用这个标签,但我们不得不做一些侦探工作,以找出究竟是如何实现它的Fen

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

HTML中常用meta整理

< meta > 元素 定义 meta标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务. -- W3School 必要属性 属性 值 描述 content some text 定义与http-equiv或name属性相关的元信息 可选属性 属性 值 描述 http-equiv content-type / expire / refresh / set-cookie 把conte