前端小记2——移动web解决方案

面向用户级移动web解决方案：

1.代码结构规范

2.字体设置

body{ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;}

iOS 4.0+ （iOS 9以下系统已经非常少） 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。

iOS 9+ Safari开始支持 -apple-system 参数， Chrome 使用 BlinkMacSystemFont ，兼容 iOS ／ MacOS.

微软雅黑是为了兼容win系统毕竟视网膜分辨率的win系统用Simsun是非常丑陋的，可以用4K屏 windows 去看 JD 淘宝，你能忍的话我就没话说

PingFang SC是简体苹方，看需要 如果要命中对应 苹方字体的话 直接写 PingFang 不带引号。

补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US)， 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁：

Heiti SC Light 黑体-简 细体
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

原生Android下中文字体与英文字体都选择默认的无衬线字体。

2.工具类方法汇总

（1）iOS web调试工具iWebinspector

简介》》iOS Web应用开发模拟器：iWebInspector。

iWebInspector是一个免费的工具提供了一个iOS(iPhone或iPad)模拟器来调试,分析和检查Web应用程序。利用它我们可以:查看和浏览每个HTML元素。可以改变属性,内容,样式并能够马上在Safari浏览器上看到效果。查看当前页面相关的资源:包括数据库,本地存储,Cookies和应用程序缓存检查您的网站上的所有网络流量查看所有脚本,创建断点,观察和调试你的JavaScript代码记录一个时间。

（2）html5与css3技术应用评估：http://html5please.com/

（3）hack

简介》》行业中存在各种浏览器，典型的浏览器包括 IE 、火狐、谷歌等等；同样种类的浏览器，也存在着不同的版本，如  IE6、IE7…等。

不同浏览器对 CSS 解析机制并不是完全相同，因此会导致不同浏览器中，页面的效果各不相同。

此时可以针对某种浏览器进行样式设置，从而达到所有浏览器显示的效果一致，这种标识不同浏览器的方法就是 hack。

 简单地说就是可以通过 hack 技术，只针对某一种或几种浏览器进行样式设置.

不同浏览器兼容：

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate ;

（4）iOS移动设备参数速查：https://ivomynttinen.com/blog/ios-design-guidelines

（5）浏览器兼容表https://www.quirksmode.org/compatibility.html

（6）html5移动端兼容性查询http://mobilehtml5.org/