前端兼容问题之meta篇

﹏ヽ暗。殇╰゛Y 2022-05-22 00:36 125阅读 0赞

之前一直开发移动端，最近项目开始做pc端的业务，项目要求兼容ie8，只能说对于前端开发来说，ie8绝对是一个噩耗，在开发pc端时不可以避免的就是遇到N多兼容性问题。

所谓浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

今天主要说一下pc端上的meta标签，meta标签也能让我避免很多兼容问题。

1、 启用360浏览器的极速模式(webkit)

<meta name=”renderer” content=”webkit”>

2、优先使用 IE 最新版本和 Chrome

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

3、  页面关键词，让自己的网站更好的被搜索到

<meta name=”keywords” content=””/>

4、 声明文档使用的字符编码

<meta charset=’utf-8′>

5、避免IE使用兼容模式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

6、 为移动设备添加 viewport

<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>

这些应该是最长使用的一些meta标签，meta标签还有的内容，但是我在项目中没有使用过：

<head lang=”en”> 标准的 lang 属性写法

<meta name=”description” content=”不超过150个字符”/>       页面描述

<meta name=”author” content=”name, email@gmail.com”/>    网页作者

<meta name=”robots” content=”index,follow”/>      搜索引擎抓取

<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin

<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）

是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>

<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色

<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码

<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓

<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器

<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏

<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏

<meta name=”full-screen” content=”yes”>              UC强制全屏

<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏

<meta name=”browsermode” content=”application”>   UC应用模式

<meta name=”x5-page-mode” content=”app”>    QQ应用模式

<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光

设置页面不缓存（貌似没有卵用）

<meta http-equiv=”pragma” content=”no-cache”>

<meta http-equiv=”cache-control” content=”no-cache”>

<meta http-equiv=”expires” content=”0″>

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript之IE兼容篇

> 前端开发等需求明确说明需要兼容IE时，我们才发现IE真的很恶心，不管是html5与css3的支持情况还是js需要做的兼容写法，都是令我们作呕的。但是身为开发人员，需求下来了

青旅半醒/ 2023年07月14日 10:40/ 0 赞/ 28 阅读

相关前端浏览器兼容性问题解决

前端浏览器兼容问题总结前端解决不同浏览器及不同版本的兼容性问题浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样

雨点打透心脏的1/2处/ 2023年06月27日 15:59/ 0 赞/ 71 阅读

相关前端兼容性

前端兼容性：所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们

「爱情、让人受尽委屈。」/ 2023年03月01日 13:52/ 0 赞/ 56 阅读

相关前端meta标签

meta主要用于设置网页的一些元数据，元数据不是给用户看的。 charset用于指定网页的字符集，<meta charset = "utf-8"> name

忘是亡心i/ 2022年08月31日 02:23/ 0 赞/ 246 阅读

相关 H5知识 -- meta篇

H5知识 – meta篇转载请注明出处 LXJ 网站开发常用<meta> <meta>标签提供了HTML文档的元数据（数据的信息）。元数据不会显示在客户端中，但会

梦里梦外;/ 2022年07月14日 06:55/ 0 赞/ 326 阅读

相关前端兼容问题之meta篇

之前一直开发移动端，最近项目开始做pc端的业务，项目要求兼容ie8，只能说对于前端开发来说，ie8绝对是一个噩耗，在开发pc端时不可以避免的就是遇到N多兼容性问题。

﹏ヽ暗。殇╰゛Y/ 2022年05月22日 00:36/ 0 赞/ 126 阅读

相关 meta http-equiv属性兼容浏览器_定时刷新

<meta http-equiv="X-UA-Compatible" content="IE=edge"> \以上代码告诉[IE浏览器][IE]，IE8/9及以后的版

灰太狼/ 2022年05月15日 06:13/ 0 赞/ 116 阅读

相关解决前端浏览器兼容问题

<!--\[if lt IE 9\]> <script src="https://oss.maxcdn.com/libs/ht

悠悠/ 2022年04月18日 03:23/ 0 赞/ 360 阅读

相关前端PC端兼容性问题

1.如果图片加a标签在IE9中会有边框。解决办法： img{ border:none; } 2.rgba

Myth丶恋晨/ 2022年04月10日 10:37/ 0 赞/ 355 阅读

相关 web前端浏览器兼容问题

浏览器兼容性 > 所谓浏览器的兼容性，就是在不同的浏览器效果对同一段代码有不同的解析；造成对页面显示效果不统一的情况主流浏览器浏览器内核是可以解析网页语言的代

深藏阁楼爱情的钟/ 2022年02月20日 10:57/ 0 赞/ 432 阅读