diff --git a/README.md b/README.md index dce3abf..81b25fa 100644 --- a/README.md +++ b/README.md @@ -3,23 +3,21 @@ Mars - mobile needs a hero 面向亿万用户级的移动端Web解决方案： -1. [代码结构规范](./solutions/project-structure.md) -2. [字体设置最佳实践](./solutions/font-family.md) -3. [模拟原生效果实践](./solutions/) -4. [工具类方法汇总](./tools/) -5. [iOS与Android平台上问题列表](./issues/) -6. [高性能Mobile Web开发](./performance/) -7. 类库依赖推荐 -8. [演示](./demos/) +* [代码结构规范](./solutions/project-structure.md) +* [字体设置最佳实践](./solutions/font-family.md) +* [模拟原生效果实践](./solutions/) +* [工具类方法汇总](./tools/) +* [iOS 与 Android 平台上问题列表](./issues/) +* [高性能 Mobile Web 开发](./performance/) +* [Omi Web组件框架](https://github.com/Tencent/omi) +* [特效制作解决方案 - css3transform](http://alloyteam.github.io/AlloyTouch/transformjs/) +* [触摸运动解决方案 - AlloyTouch](https://github.com/AlloyTeam/AlloyTouch) +* [Mobile 手势解决方案 - AlloyFinger](https://github.com/AlloyTeam/AlloyFinger) +* [Mobile 裁剪解决方案 - AlloyCrop](https://github.com/AlloyTeam/AlloyCrop) +* [Mobile 级联选择器](https://github.com/AlloyTeam/AlloyTouch/tree/master/select) +* [1kb代码搞定移动 Web 开发调试发布错误监控上报用户问题定位 - AlloyLever](https://github.com/AlloyTeam/AlloyLever) +* [小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax](https://github.com/dntzhang/cax) -AlloyTeam 邀请社区朋友一起参与完善 Mars，欢迎 [Fork](https://github.com/AlloyTeam/Mars/fork) & [Pull Request](https://github.com/AlloyTeam/Mars/pulls) +### [捐助Mars](http://alloyteam.github.io/donate.html) -### 贡献者 - -1. 元彦 -2. Johnny Kwok -3. maxzhang -4. Adams - -###[如何贡献?](https://github.com/AlloyTeam/Mars/wiki/%E5%A6%82%E4%BD%95%E8%B4%A1%E7%8C%AE%E5%86%85%E5%AE%B9) -> 腾讯 +腾讯 AlloyTeam 邀请社区朋友一起参与完善 Mars，欢迎 [Fork](https://github.com/AlloyTeam/Mars/fork) & [Pull Request](https://github.com/AlloyTeam/Mars/pulls) diff --git a/issues/README.md b/issues/README.md index c54168d..82fadff 100644 --- a/issues/README.md +++ b/issues/README.md @@ -99,6 +99,7 @@ click 事件普遍 300ms 的延迟 }); 把代码放在 setTimeout 中，会发现程序变快. + ### 关于 iOS 系统中，WebAPP 启动图片在不同设备上的适应性设置 @@ -135,7 +136,7 @@ Android web视图，例如在 HTC EVO 和三星的 Galaxy Nexus 中，文本输 参考： -###移动端 HTML5 audio autoplay 失效问题 +### 移动端 HTML5 audio autoplay 失效问题 这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。 @@ -153,7 +154,7 @@ document.addEventListener('touchstart', function () { 扩展阅读： -###移动端 HTML5 input date 不支持 placeholder 问题 +### 移动端 HTML5 input date 不支持 placeholder 问题 input type date 的 placeholder 支持性有一定问题，因为浏览器会针对此类型 input 增加 datepicker 模块，看上去没那么必要支持 placeholder。 @@ -180,7 +181,7 @@ input type date 的 placeholder 支持性有一定问题，因为浏览器会针 方案出处： -###IOS Safari 支持localstorage但是setItem异常（QUOTA_EXCEEDED_ERR:DOM Exception 22） +### IOS Safari 支持localstorage但是setItem异常（QUOTA_EXCEEDED_ERR:DOM Exception 22） 平台：IOS8.1 browser：Safari600.1.4 @@ -188,7 +189,8 @@ input type date 的 placeholder 支持性有一定问题，因为浏览器会针 问题源自于项目需要在浏览器中遮罩提示,点击关闭状态存储在localstorage中。Safari浏览器关闭后刷新页面层依旧存在 bug issue 简单的存储状态可以使用cookie的方式替代。 -###Chrome 地址栏自动隐藏交互行为对于fixed 顶部的元素遮挡 + +### Chrome 地址栏自动隐藏交互行为对于fixed 顶部的元素遮挡 系统：IOS8.1 浏览器：Chrome 26.0.1410.53 @@ -200,25 +202,27 @@ input type date 的 placeholder 支持性有一定问题，因为浏览器会针 bug fixed 解决办法在这里 -###Android平台遮罩层下的input、select、a等元素可以被点击和focus(点击穿透) +### Android平台遮罩层下的input、select、a等元素可以被点击和focus(点击穿透) 问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change. bug issue ，在查看bug报告list以后，找到了两种解决方案，第一是通过层显示以后加入对应的class名控制，第二是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式） -###部分机型存在type为search的input，自带close按钮样式修改方法 +### 部分机型存在type为search的input，自带close按钮样式修改方法 有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为 - #Search::-webkit-search-cancel-button{ - display: none; - } +```css +#Search::-webkit-search-cancel-button{ + display: none; +} +``` 如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。 -###唤起select的option展开 +### 唤起select的option展开 zepto方式: ``` -$(sltElement).trrgger("mousedown"); +$(sltElement).trigger("mousedown"); ``` 原生js方式: ``` @@ -228,4 +232,4 @@ function showDropdown(sltElement) { event.initMouseEvent('mousedown', true, true, window); sltElement.dispatchEvent(event); }; -``` \ No newline at end of file +``` diff --git a/performance/README.md b/performance/README.md index 76b4295..76b135d 100644 --- a/performance/README.md +++ b/performance/README.md @@ -3,3 +3,5 @@ 1. [高性能CSS3动画](./high-performance-css3-animation.md) 2. [CSS动画属性性能](./css-property-animation-performance.md) +3. [高性能滚动](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md) +4. [离线 Web App 以及消息同步与推送实现](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) diff --git a/solutions/README.md b/solutions/README.md index 62d8d8e..cb2d6e7 100644 --- a/solutions/README.md +++ b/solutions/README.md @@ -1,6 +1,6 @@ 模拟原生效果实践 ==== -1. [使用border-image实现类似物理1像素](./border-1px.md) +1. [CSS 实现类似物理1像素](./border-1px.md) 2. [ios] [Web App Icon与启动图片实践(1)](https://gist.github.com/tfausak/2222823) -2. [ios] [Web App Icon与启动图片实践(2)](http://mobile.51cto.com/web-395063.htm) +3. [ios] [Web App Icon与启动图片实践(2)](http://mobile.51cto.com/web-395063.htm) diff --git a/solutions/border-1px.md b/solutions/border-1px.md index fe98f29..6a9f84b 100644 --- a/solutions/border-1px.md +++ b/solutions/border-1px.md @@ -1,6 +1,6 @@ -使用border-image实现类似iOS7的1px底边 +CSS 实现类似原生效果的 1px 边框 ===== - +## 一.使用border-image实现类似iOS7的1px底边 iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的地方，其中有很多设计细节都是值得研究的。 首先，来看下面iOS设置的截图中的border： @@ -65,3 +65,23 @@ iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的 -webkit-border-image: url("data:image/png;base64,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") 2 0 stretch; } ``` + +## 使用 CSS3 transform 实现 + +```css +.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; +} +``` diff --git a/solutions/font-family.md b/solutions/font-family.md index c397ce3..3061aca 100644 --- a/solutions/font-family.md +++ b/solutions/font-family.md @@ -2,14 +2,21 @@ ```css body { - font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; + } ``` -iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。 - +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兼容命中系统默认中文字体黑体-简或黑体-繁： @@ -28,6 +35,8 @@ Heiti TC Medium 黑体-繁 中黑 其他第三方Android系统也一致选择默认的无衬线字体。 +Android 就直接让它命中系统字体吧，因为你无法预知发行厂商会去内置什么字体，或者人家root去修改什么字体。 + ## 参考阅读 * [Droid, the default font for older versions of Android](http://en.wikipedia.org/wiki/Droid_fonts) * [Roboto, the default font for newer versions of Android](http://en.wikipedia.org/wiki/Roboto) diff --git a/tools/README.md b/tools/README.md index fb46b59..b76270f 100644 --- a/tools/README.md +++ b/tools/README.md @@ -46,3 +46,7 @@ * [移动端手势表](http://ww1.sinaimg.cn/large/c2c57f68jw1e4fh7dmw12j20fi2w6qe1.jpg "移动端手势表") * [webkit独有的样式分析](http://ued.ctrip.com/blog/wp-content/webkitcss/ "webkit独有的样式分析") + +* [地图地区分布配色方案选择工具](https://github.com/axismaps/colorbrewer/ "地图地区分布配色方案选择工具") + +* [在线配色选择器](http://www.peise.net/tools/web/ "在线配色选择器")