百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

CSS 与 JS 注意事项

作者高艺菲课程任务十一:移动Web页面布局实践2588次浏览92017-03-23 16:01

框架- 不推荐

Reference

JS

手机端对ES5的特性已经全部都支持的很好了

对手势的处理,zepto中有几个很有用的事件,swipe,swipeLeft,right,up,down,一类的,还有tap,我们可以看下zepto的源码:zepto,自己写一个swipe的基类,徒手写个下托刷新禁止页面惯性反弹的代码,这里给个思路,比如我们检测touchmove的位置快到达页面【或者容器】底部的时候,阻止touchmove,做容器或者页面translate移动,再在下部埋一个loading,touchend之后再做缓动回复,应该普通前端都能做到。

swipe.js 做幻灯用的,但是我使用swipe框架的经历也是很痛苦的,比如无法很好的设置滚动过的距离,自定义缓动效果,还有无法它自己本身带的一些问题,比如横竖屏的时候复位问题,动态插入子节点重排等,让我第一次用的时候越开发越伤心,后来干脆也是自己实现。

划屏活动页的组件:
https://github.com/xiaojue/EasySlide

CSS

common css
https://gist.github.com/xiaojue/8bac56fb488532e7857f

Rules

  1. 使用缩放、倾斜这种手段hack来突破极限,比如最小字体,自己画的伪类图标
  2. 能css画的不要用图
  3. 大小需要自适应的图标做成字体的不要画
  4. 能flex布局的不要浮动,不要用绝对定位(不利于页面布局的扩展)
  5. 常见组件

     * touch对应的swipe事件。
     * 各种滑动翻页效果。
     * 简单的小游戏框架。
     * 视频和音频的包装。
     * 各种lazyload。
     * 各种keyframes效果收集。
     * 拉拽刷新。
     * PC相同的:浮层,tip,气泡,分享,添加主屏
    

常用的css模块

1. 一行省略
//一行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行省略
//移动端大部分是webkit内核
-webkit-line-clamp: 2;
display: -webkit-box;

-webkit-box-orient:  //子元素的排列方式
text-overflow: ellipsis
2. input date

input type date的placeholder支持性有问题,使用placeholder的目的是为了让用户更准确的输入文字。但是iOS上不显示placeholder文字,但是安卓的部分机型没有datepicker也不会显示placeholder
兼容性如下:
PC:

* Safari不支持,placeholder正常显示
* Firefox 不支持,placeholder正常显示
* Chrome支持datepicker,显示年、月、日格式,忽略placeholder

移动:

* iPhone5 iOS7 有datepicker,但不支持placeholder
* Android 4.04 无datepicker

问题解决方法:
设置type为text,此时支持placeholder,当触摸或者聚焦的时候,使用JS切换使其触发datepicker功能

<input placeHolder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date" >
3. 快速回弹滚动

早期移动端的浏览器不支持非body元素的滚动条所以一般借助iScroll, 安卓4.0和iOS5.0解决了滚动条不可见,增加了快速回弹滚动效果。
在iOS上拥有像Native的滚动效果:

 div{
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 }
4. 移动端取消touch高亮效果

所有a标签在触发点击时,或者设置了伪类:active的元素,默认都会在激活状态时显示高亮框。禁止高亮框的办法:

-webkit-tap-highlight-color: rgba(0,0,0,0);

大部分机子有效,但是三星自带浏览器无效。还有一种办法是不使用a标签

5. 禁止保存或拷贝图像

通常你长按img,会弹出选项: 存储图像或者拷贝图像,禁止方法

 img{
     -webkit-touch-callout: none;
 }
6. 清除输入框内阴影

iOS上,输入框默认有内部引用,但无法使用box-shadow来清除。

 input, textarea{
     border: 0;/*法1*/
     -webkit-appearance: none; /*方法2*/
 }

7. 横竖屏

 window.addEventListener('orientationchange', function() {
   // rerender something
});

console.log(window.orientation); // 0, 90, 180, -90 顺时针角度

<style media="all and (orientation:portrait)" type="text/css">
    /* 竖屏 */
</style>

<style media="all and (orientation:landscape)" type="text/css">
    /* 横屏 */
</style>

8. Flex伸缩布局

 .container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

flex box 兼容写法

移动端的性能优化和统计

分散成不同的几个资源下载,总时间比较快,比如活动页面,h5小游戏页都是这样。可以统一把资源图拆开加载,然后增加loading即可。

移动端网页布局方法

em与rem

em是父元素的fontsize的倍数表示,rem是root即为html的fontsize的倍数表示。html.style.fontSize=12px; 那么1rem即为12px
移动端的默认字体为16px,如果想要1rem表示为10px,需要10 % 16 = 0.625; 即为62.5%, 就可以把设计稿的px转换成rem来自适应了。

(网络原因,大神的js看不了)

首先根据设计稿的宽度设置一个基值base,然后用js获取当前窗口宽度width,fontSize = width/(base/100), ps里的px除以100就得到了任何宽度环境下rem值。有些浏览器rem单位是存在bug的,比如比例值不准,这时只要活得这个不准的比例再转换成准的,赋值给fontSize,之后再处理一下旋转屏幕的情况,resize的情况。

开发规范

字体设置

 body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

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

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

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

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
    user-select: none;
}

发布前必须检查

Copy from http://alloyteam.github.io/Spirit/modules/Standard/

  • 所有图片必须有进行过压缩
  • 考虑适度的有损压缩,如转化为80%质量的jpg图片
  • 考虑把大图切成多张小图,常见在banner图过大的场景

加载性能优化, 达到打开足够快

* 数据离线化,考虑将数据缓存在 localStorage
* 初始请求资源数 < 4 注意!
* 图片使用CSS Sprites 或 DataURI
* 外链 CSS 中避免 @import 引入
* 考虑内嵌小型的静态资源内容
* 初始请求资源gzip后总体积 < 50kb
* 静态资源(HTML/CSS/JS/Image)是否优化压缩?
* 避免打包大型类库
* 确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意!
* 尽量使用CSS3代替图片
* 初始首屏之外的静态资源(JS/CSS)延迟加载 注意!
* 初始首屏之外的图片资源按需加载(判断可视区域) 注意!
* 单页面应用(SPA)考虑延迟加载非首屏业务模块
* 开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

* 避免 iOS 300+ms 点击延时问题 注意!
* 缓存 DOM 选择与计算
* 避免触发页面重绘的操作
* Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意!
* 尽可能使用事件代理,避免批量绑定事件
    * 就是使用on的父级绑定事件,冒泡到子元素
* 使用CSS3动画代替JS动画
* 避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
* HTML结构层级保持足够简单
* 尽能少的使用CSS高级选择器与通配选择器
    * 不使用 *,把需要的的元素直接列举出来
    * 高级选择器就是,:first-child, :first-type, ::before, ::after, 属性选择器,>, ~
* Keep it simple

其他

  1. 利用CSS3边框背景属性
    使用-webkit-border-image来定义这个按钮的样式。

  2. 块级化a标签
    请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。

  3. 如何去除Android平台中对邮箱地址的识别
    在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中

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

  1. 如何去除iOS和Android中的输入URL的控件条

setTimeout(scrollTo,0,0,0);

请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。

  1. 如何禁止用户旋转设备
    做不到!

  2. 如何检测用户是通过主屏启动你的webapp
    从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了。还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。

  3. 如何关闭iOS中键盘自动大写
    我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定 autocapitalize=”off” 来关闭键盘默认首字母大写。

  4. iOS中如何彻底禁止用户在新窗口打开页面, iOS中如何禁止用户保存图片\复制图片
    webkit-touch-callout样式属性为none

  5. iOS中如何禁止用户选中文字
    -webkit-user-select属性为none

  6. iOS中如何获取滚动条的值
    桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。


待阅读
Mars
https://github.com/jtyjty99999/mobileTech
这个碉堡的网页 http://junmer.github.io/mobile-dev-get-started/#/

1条评论