自古以来都是能人掌天下，在技场上也是同样的道理。
一个优秀的开发者，在开发一个项目关注的不止只是功能的实现或视图的展现，想必在项目开发中大家都会组织功能封装，减少代码重写，减小请求负重，提升加载速度等。在我看来，这些都只是家常便饭，因为我一直认为，一名优秀的开发者，不只是单方面的只关注于技术层次，我们更应该学会总结，总结每次项目开发中所遇到的种种问题，碰到的各种奇葩事情，这样也是在更快的提升自己的能力及学问，下次开发就不会再重复出现相同问题，节省不必要浪费的时间，就能更快的交出自己的答案。如果你觉得我说的是那么回事，行，我的目的达到了 …
好，上面扯了一段白话，下面咱们进入主题，讲讲我对于这些基础的总结吧！

一、meta标签的总结

1.keywords,description(经常用到的两个)

页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开

<meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">
<meta name="description" content="html meta标签大全,整理一下加强记忆">

2.Content-Type

告诉浏览器当前访问的资源类型

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--告诉浏览器当前访问的资源类型 并声明编码-->

3.viewport

随大小设备自动适配

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.5, minimum-scale=1.0, user-scalable=no"/>

说明：

什么是viewport？
简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。

viewport是用来干什么的？
viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

viewport默认有6个属性，分别如下：

width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串”width-device”

initial-scale: 页面初始的缩放值，为数字，可以是小数

minimum-scale: 允许用户的最小缩放值，为数字，可以是小数

maximum-scale: 允许用户的最大缩放值，为数字，可以是小数

user-scalable: 是否允许用户进行缩放，’no’为不允许，’yes’为允许

4.apple-mobile-web-app-capable

设置Web应用是否以全屏模式运行。

<meta name="apple-mobile-web-app-capable" content="yes"/>

说明：

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

5.sharecontent

微信分享页面设置

<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>

6.refresh

重定向（以下示例5秒后会跳转到：https://www.wujiabk.com）

<meta http-equiv="refresh" content="5;url="https://www.wujiabk.com" />

7.full-screen

全屏显示网页(部分移动端浏览器的专有属性)

<meta name="full-screen" content="yes"/>

8.browsermode

浏览器模式-强制坚屏显示(部分移动端浏览器的专有属性)

<meta name="browsermode" content="application"/>

9.format-detection

数据格式验证渲染：
telephone：而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！默认开启
email：浏览器会识别邮箱并加样式，点击可以调用系统默认邮件应用给该地址发邮件，默认开启
adress：adress=yes就开启了点击地址直接跳转至地图的功能，默认开启

<meta content="telephone=no" name="format-detection" />
<meta content="telephone=no,email=no,adress=no" name="format-detection" />

10.x5-orientation

QQ浏览器强制竖屏

<meta name="x5-orientation" content="portrait"/>

11.x5-fullscreen

QQ浏览器强制全屏

<meta name="x5-fullscreen" content="true"/>

12.x5-page-mode

QQ浏览器应用模式

<meta name="x5-page-mode" content="app"/>

13.X-UA-Compatible

IE的兼容模式:以IE的哪个版本去渲染页面（IE=8：以IE8的模式去渲染页面，IE=Edge:以最新版本的IE去渲染页面，当然这个最新指的是你系统装的最高版本的IE）

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

14.renderer

这貌似是360浏览器专用，兼容360的利器啊，，360默认是用IE7去渲染页面的，不管你的系统装了多高版本的IE,这种行为真是业界毒瘤啊。

<!--默认webkit内核-->
<meta name="renderer" content="webkit">
<!--默认IE兼容模式-->  
<meta name="renderer" content="ie-comp">
<!--默认IE标准模式-->    
<meta name="renderer" content="ie-stand">

15.Cache-Control

设置缓存

<meta http-equiv="Cache-Control" content="no-cache" />

说明：

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

二、常见问题解决方法：

1.上下拉动滚动条时卡顿、慢

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

2.禁止复制、选中文本

element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

3.长时间按住页面出现闪退

element {
  -webkit-touch-callout: none;
}

4.iphone及ipad下输入框默认内阴影

element{
  -webkit-appearance: none; 
}

5.ios和android下触摸元素时出现半透明灰色遮罩

element{
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}

设置alpha值为0就可以去除半透明灰色遮罩
备注：transparent的属性值在android下无效

6.Retina屏的1px边框

element{
  border-width: thin;
}

7.旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust:100%;
}

8.transition闪屏

<!--设置内嵌的元素在 3D 空间如何呈现：保留3D -->
-webkit-transform-style: preserve-3d;
<!-- 设置进行转换的元素的背面在面对用户时是否可见：隐藏 -->
-webkit-backface-visibility:hidden;

9.圆角bug

某些Android手机圆角失效

* {
    background-clip: padding-box;  
}

10.桌面图标

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />

图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)

11.启动画面

<link rel="apple-touch-startup-image" href="start.png"/>

12.iOS下页面启动加载时显示的画面图片，避免加载时的白屏。

可以通过madia来指定不同的大小：

<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

13.ios 设置input 按钮样式会被默认样式覆盖

input,
textarea {
  border: 0; 
  -webkit-appearance: none; 
}

设置默认样式为none

14.IOS键盘字母输入，默认首字母大写

解决方案，设置如下属性：

<input type="text" autocapitalize="off" />

15.select 下拉选择设置右对

select option {
    direction: rtl;
}

16.消除IE10里面的那个叉号

input:-ms-clear{display:none;}

热门文章

最新评论