腾讯移动-Web-前端知识库学习一

移动端 Web 解决方案学习：
（一）代码结构规范

使用 Mobile Boilerplate
在官网 (https://html5boilerplate.com/) 下载之后的目录结构：

CSS
该目录应包含项目的所有 CSS 文件。它包含一些初始 CSS，以帮助您从一个坚实的基础开始。关于 CSS。
DOC
该目录包含所有 HTML5 Boilerplate 文档。您可以将它用作您自己项目文档的位置和基础。
JS
该目录应包含项目的所有 JS 文件。这里可以包含库，插件和自定义代码。它包含一些初始的 JS 来帮助您入门。关于 JavaScript。
.htaccess
默认的 Web 服务器配置适用于 Apache。有关更多信息，请参阅 Apache Server Configs 存储库。
在 Apache 以外的服务器上托管您的站点？您可能会在我们的 Server Configs 存储库中找到相应的服务器配置项目。
404.html
一个有用的自定义 404，可以帮助您入门。
browserconfig.xml
此文件包含有关 IE11 和 Edge 的自定义切片的所有设置。
有关此主题的更多信息，请参阅 Microsoft 的文档。
.editorconfig
.editorconfig 提供该文件是为了鼓励和帮助您和您的团队在不同的编辑器和 IDE 之间保持一致的编码风格。了解更多有关.editorconfig 文件。
index.html
这是默认的 HTML 框架，应构成您网站上所有网页的基础。如果您使用的是服务器端模板框架，则需要将此初始 HTML 与您的设置集成。
如果您修改目录结构，请确保更新引用的 CSS 和 JavaScript 的 URL。
如果您使用的是 Google Universal Analytics，请确保编辑底部的相应代码段以包含您的分析 ID。
humans.txt
编辑此文件以包含在您的网站 / 应用上工作的团队以及为其提供支持的技术。
robots.txt
编辑此文件以包含您需要从搜索引擎隐藏的任何页面。
图标
替换默认 favicon.ico，tile.png，tile-wide.png 和苹果触摸图标用自己的。
如果您想针对不同的分辨率使用不同的 Apple Touch 图标，请参阅相应的文档。
(二)字体设计方案
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 系统
需补充说明，华文黑体并不存在 iOS 的字体库中
但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体 - 简或黑体 - 繁：
Heiti SC Light 黑体 - 简 细体
Heiti SC Medium 黑体 - 简 中黑
Heiti TC Light 黑体 - 繁 细体
Heiti TC Medium 黑体 - 繁 中黑
Android 就直接让它命中系统字体吧，因为你无法预知发行厂商会去内置什么字体，或者人家 root 去修改什么字体。
(三) 模拟原生效果实践
(1) css 实现类似物理 1 像素：
IOS 中的 border:

border 是一根非常细的线.
在实现 1px 物理像素之前，首先需要了解的知识：
1>设备像素比 devicePixelRatio 简单介绍
定义：window.devicePixelRatio(设备像素比)是设备上物理像素和设备独立像素 (device-independent pixels (dips))
的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
dip 或 dp,（device independent pixels，设备独立像素）与屏幕密度有关。
dip 可以用来辅助区分视网膜设备还是非视网膜设备。
所有非视网膜屏幕的 iphone 在垂直的时候，宽度为 320 物理像素。
当你使用 <meta name=”viewport” content=”width=device-width”> 的时候，
会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为 320px,
于是，页面很自然地覆盖在屏幕上。

这样，非视网膜屏幕的 iphone 上，屏幕物理像素 320 像素，独立像素也是 320 像素，因此，window.devicePixelRatio 等于 1
而对于视网膜屏幕的 iphone，如 iphone4s, 纵向显示的时候，屏幕物理像素 640 像素。
同样，当用户设置 <meta name=”viewport” content=”width=device-width”> 的时候，
其视区宽度并不是 640 像素，而是 320 像素，这是为了有更好的阅读体验 – 更合适的文字大小。
这样，在视网膜屏幕的 iphone 上，屏幕物理像素 640 像素，
独立像素还是 320 像素，
因此，window.devicePixelRatio 等于 2.
当页面设置了 <meta name=”viewport” content=”width=device-width”> 时候，
document.documentElement.clientWidth 在大部分浏览器下，
得到的是布局视区的宽度，等同于 dips(独立像素)的宽度。
对于 screen.width 的值:
在 iOS 视网膜设备上，screen.width 返回 dips 宽。
因此，在竖着显示的时候，视网膜显示屏的 ipad 和非视网膜显示屏的 ipad 返回的都是 768.
(结论)
devicePixelRatio 在大多数浏览器是值得信赖的。
在 iOS 设备，screen.width 乘以 devicePixelRatio 得到的是物理像素值。
在 Android 以及 Windows Phone 设备，screen.width 除以 devicePixelRatio 得到的是设备独立像素 (dips) 值。
(设备像素比原文链接：https://www.zhangxinxu.com/wo…
2>CSS3 border-image 详解、应用及 jQuery 插件
border-image:
兼容性：
目前支持的浏览器有限，仅 Firefox3.5，chrome 浏览器，Safari3+

(2016 年之后)
现在 IE11+，FireFox 以及 Chrome 浏览器均已支持 border-image，并且目前也就 Android4.3 及其以下版本需要 -webkit- 私有前缀，可以说 border-image 的时代即将到来。
特性：
类比 background:url(xx.jpg) 27px no-repeat;
border-image 包括图片，剪裁位置（与 background 位置一样，也是数值，也支持百分值），重复性。
例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比 background，这有助于 border-image 属性的记忆。
border-image 的参数就是上面提到的三个：图片，剪裁位置，重复性。

border-image 的数值参数其实是用来剪裁边框图片的，正好“哗哗四刀”切出了个九宫格的模型，需要用到九宫格模型帮助我们理解 border-image 的绘制原理

边框将 border-image 分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image 以及中间的内容区域:

图中，橙红色的四个边角的菱形区域称为“角边框图片”，
在 border-image 中，角边框图片是没有任何展示效果的，不会平铺，不会重复，也不会拉伸，有点类似于视觉中盲点的意思。
而对边的四个橙黄色区域属于展示效果的作用区（也是边框宽度计算剩余区），
上下区域即 border-top-image 和 border-bottom-image 区域受到展示效果属性的第一个参数——水平方向效果影响：
如果为 repeat，则此区域图片会水平重复，
如果是 round，则此框框内的图片会水平平铺，
如果是 stretch，则此矩形域中的图片就会被水平拉伸。
中间的区域（左图的空白格）受到全部参数的作用，在水平和垂直两个维度上都有展示效果（平铺、拉伸等）。
DEMO:
拉伸：
.border_image{

width:400px;
height:100px;
border:1em double orange;
border-image:url(../image/border.png) 27;}

平铺：
.border_image{

width:400px;
height:100px;
border:1em double orange;
border-image:url(../image/border.png) 27 round; }

重复：
.border_image{

width:400px;
height:100px; 
border:1em double orange;
border-image:url(../image/border.png) 27 repeat;

}

这一个边角处的菱形都是被截掉的。
border-image 绘制原理简述

共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。
调用边框图片
border-image 的 url 属性，通过相对或绝对路径链接图片。
边框图片的剪裁
border-image 的数值参数剪裁边框图片，形成九宫格。
执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。
上下的九宫格执行水平方向的重复属性（拉伸或平铺），
左右的格子执行垂直方向的重复属性，
而中间的那个格子则水平重复和垂直方向的重复都要执行。

border-image 效果的 jQuery 插件
jquery.borderImage.js(链接描述)

使用方法
$(‘#element’).borderImage(‘url(“border.png”) 30% 35% 40% 30%’);
(border-image 这里的原文链接 https://www.zhangxinxu.com/wo…

border 实现效果：
.border-1px {border-width: 1px 0;border-style: solid;border-color: #333;}

因为 devicePixelRatio 特性，在手机屏幕上，border 被放大到物理像素 2px 显示，在 iPhone 上就显得较粗。

使用 border-image 属性实现物理 1px

通常手机端的页面设计稿都是放大一倍的，如：为适应 iphone retina，
设计稿会设计成 640*960 的分辨率，图片按照 2 倍大小切出来，
在手机端看着就不会虚化，非常清晰。
同样，在使用 border-image 时，将 border 设计为物理 1px

.border-image-1px {border-width: 1px 0px;-webkit-border-image: url(“border.png”) 2 0 stretch;border-image: url(“border.png”) 2 0 stretch;}
border.png 也可以直接使用的 base64 替代:
.border-image-1px {border-width: 1px 0px;-webkit-border-image: url(“data:image/png;base64,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”) 2 0 stretch;}

使用 CSS3 transform 实现
.border-1px {position: relative;}
.border-1px:after {position: absolute;content: ”;top: -50%;bottom: -50%;left: -50%;right: -50%;-webkit-transform: scale(0.5);transform: scale(0.5);border-top: 1px solid #666;border-bottom: 1px solid #666;}
(2) Web App Icon 与启动图片实践

iOS 允许网站开发者像 NativeApp 一样在 iOS 设备的主屏幕为其网站添加一个启动 Icon，
这个代表着网站的 Icon 在苹果官方开发者文档里被称为“Web Clip”，
它的作用类似于桌面浏览器的书签，用户通过点击 Icon 能直接快速打开这个 url 的网站。

为了给某个网页或者整个网站指定一个漂亮的桌面启动图标，iOS Safari 提供了两个私有接口：
apple-touch-icon 和 apple-touch-icon-precomposed。
设置方法:
通过在页面 HTML 的头部添加 <link> 标签:
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon-precomposed” href=”touch-icon-precomposed.png” />
这两个标签都是用来指定桌面图标的，但两者有个细微的区别，
通过 apple-touch-icon 添加的图标是会带 iOS 图标统一的高光效果
通过 apple-touch-icon-precomposed 添加的图标则是设计原图，不带高光渐变效果的。
图片大小:
为了给不同的 iOS 设备指定其启动图标，在 iOS Human Interface Guide 中提到，推荐以下四种尺寸：
iOS 设备 最适尺寸 (px)
iPhone 和 iTouch 57 x 57
retina iPhone 和 retina iTouch 114 x 114
iPad 72 x 72
retina iPad 144 x 144
相应地，要指定不同分辨率的设备的图标，可以添加相应的 <link> 标签序列，官方建议的顺序是这样的:
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone-retina.png” />
<link rel=”apple-touch-icon” sizes=”144×144″ href=”touch-icon-ipad-retina.png” />
通过 <link> 的 <sizes> 属性可以特别地声明这个图标是为哪种分辨率设备准备的，如果没有指明 <sizes> 属性的大小，则默认值为 57×57。

如果所有的 <link> 标签序列中都没有符合官方推荐的最适尺寸的话，
那么 iOS 会从所有比推荐的最适尺寸大的图标中选择尺寸最小的那一个，
如果所有的 <link> 标签序列中的图标都比当前推荐的最适尺寸小的话，
iOS 会从这些图片中自动选择最大的那个来作为启动图标。
特别地，如果整个页面都没有指定任何的 apple-touch-icon 的图标的话，
iOS 则会自动去网站根目录寻找有 apple-touch-icon 和 apple-touch-icon-precomposed 前缀的图标文件。
图片格式：
用于设置成为桌面启动图标的图片文件，可以是以下三种类别：
纯静态的图片图片的路径可以绝对路径、相对于当前页面的相对路径以及相对于网站根目录的路径。
目前发现不仅支持 png 格式的，jpg 和 gif 也在支持的列表中
/files/uploadimg/20130522/1005102.png
但如果是动态 gif 图片只会截取一帧（第一帧？）来显示
包含图片文件头的 HTTP REQUEST 可以不是一个静态的文件，而是由服务器返回的带有图片
文件比如 image/png 文件头的请求。就像我们常用的图片
占位图工具 http://getimg.in 的图片
http://getimg.in/144x144tcat
这个的优点是可以根据前端需要动态地返回不同的图片，缺点是，每次新的图片都需要请求服务器，从服务器下载
base64 格式的图片这是一个包含 png 文件头的长字符串，它可以是一张从静态图片转换的，也可以是从服务器返回的，还可以是 canvas 生成的。
data:image/png;base64,(xxxxxx)

[Web App Icon 原文链接][2]

(原文网址：https://github.com/AlloyTeam/…