搜索
首页web前端html教程<meta>标签 - margic

1.viewport

能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。

       //表示支持响应式设计

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放(user-scalable=no//user-scalable=0,不允许用户手动缩放)

注意:content里多个属性的设置一定要用逗号+空格来隔开,如果不规范将不会起作用

WebApp全屏模式:伪装app,离线应用

<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-mobile-web-app-capable" <span class="hljs-attribute">content=<span class="hljs-value">"yes" />   //<span class="hljs-comment">启用 WebApp 全屏模式</span></span></span></span></span></span>

隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 

<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-mobile-web-app-status-bar-style" <span class="hljs-attribute">content=<span class="hljs-value">"black-translucent" /></span></span></span></span></span>

添加到主屏后的标题

<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-mobile-web-app-title" <span class="hljs-attribute">content=<span class="hljs-value">"标题"></span></span></span></span></span>

忽略数字自动识别为电话号码

<span class="hljs-tag">meta <span class="hljs-attribute">content=<span class="hljs-value">"telephone=no" <span class="hljs-attribute">name=<span class="hljs-value">"format-detection" /></span></span></span></span></span>

忽略识别邮箱

<span class="hljs-tag">meta <span class="hljs-attribute">content=<span class="hljs-value">"email=no" <span class="hljs-attribute">name=<span class="hljs-value">"format-detection" /> </span></span></span></span></span>

添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner

<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-itunes-app" <span class="hljs-attribute">content=<span class="hljs-value">"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"></span></span></span></span></span>

<span class="hljs-comment"><!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --></span><span class="hljs-comment"><span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"HandheldFriendly" <span class="hljs-attribute">content=<span class="hljs-value">"true"> </span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- 微软的老式浏览器 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"MobileOptimized" <span class="hljs-attribute">content=<span class="hljs-value">"320"> </span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- uc强制竖屏 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"screen-orientation" <span class="hljs-attribute">content=<span class="hljs-value">"portrait"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- QQ强制竖屏 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"x5-orientation" <span class="hljs-attribute">content=<span class="hljs-value">"portrait"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- UC强制全屏 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"full-screen" <span class="hljs-attribute">content=<span class="hljs-value">"yes"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- QQ强制全屏 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"x5-fullscreen" <span class="hljs-attribute">content=<span class="hljs-value">"true"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- UC应用模式 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"browsermode" <span class="hljs-attribute">content=<span class="hljs-value">"application"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- QQ应用模式 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"x5-page-mode" <span class="hljs-attribute">content=<span class="hljs-value">"app"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- windows phone 点击无高光 --> <span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"msapplication-tap-highlight" <span class="hljs-attribute">content=<span class="hljs-value">"no"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

 

网页相关

  • 申明编码
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">'utf-8' />
</span></span></span></span></code>
  • 优先使用 IE 最新版本和 Chrome
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=edge,chrome=1" />
<span class="hljs-comment"><!-- 关于X-UA-Compatible -->
<span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=6" ><span class="hljs-comment"><!-- 使用IE6 -->
<span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=7" ><span class="hljs-comment"><!-- 使用IE7 -->
<span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=8" ><span class="hljs-comment"><!-- 使用IE8 -->
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
  • 浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。
<code> <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"renderer" <span class="hljs-attribute">content=<span class="hljs-value">"webkit|ie-comp|ie-stand">
</span></span></span></span></span></span></code>

国内双核浏览器默认内核模式如下:
1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)

  • 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"Pragma" <span class="hljs-attribute">content=<span class="hljs-value">"no-cache">
</span></span></span></span></span></span></code>
  • Windows 8
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"msapplication-TileColor" <span class="hljs-attribute">content=<span class="hljs-value">"#000"/> <span class="hljs-comment"><!-- Windows 8 磁贴颜色 -->
<span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"msapplication-TileImage" <span class="hljs-attribute">content=<span class="hljs-value">"icon.png"/> <span class="hljs-comment"><!-- Windows 8 磁贴图标 -->
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
  • 站点适配:主要用于PC-手机页的对应关系。
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"mobile-agent"<span class="hljs-value">content="format=[wml|xhtml|html5]; <span class="hljs-attribute">url=<span class="hljs-value">url">
<span class="hljs-comment"><!--
[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;
url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。
 -->
</span></span></span></span></span></span></span></span></code>
  • 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta
<code><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"Cache-Control" <span class="hljs-attribute">content=<span class="hljs-value">"no-siteapp" /><br /></span></span></span></span></span></code>

2.Content-Type和Content-Language (显示字符集的设定)


  说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内容。


  用法:

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML文档中的根标签是什么?HTML文档中的根标签是什么?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head&gt; &&lt;身体&gt; HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

HTML中的'类”属性是什么?HTML中的'类”属性是什么?Apr 28, 2025 pm 05:37 PM

本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用,将其与唯一的“ ID”属性进行对比。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版