maxxxz / blog Goto Github PK

目前的处理方案有4种（项目中采用了最后一种）：

1. 通过添加伪类然后利用缩放 transform: scale(0. x); 来达到目的。
   劣势：

• 处理麻烦
• 圆角不好弄

2. 参照淘宝首页的方案（旧版），根据手机dpr进行meta标签 宽度的放大和initial-scale 进行缩放。
   优势：

• 统一设置，方便
  劣势：
• 图片引用比可视宽度放大dpr倍的图片，消耗流量（因此淘宝只有首页采用了这个方案，其他页面没有处理1px线问题）。

3.在18/04/20再看淘宝的页（chrome模拟器），切换了几种模拟器，都是采用一个div块(0.5px的高或者宽)绝对定位的线做border。
疑惑：

• 之前直接使用border-width=0.5px的时候，会出现部分手机显示不了这个线的问题。
• 难道是因为div块使用0.5px做高宽的时候可以规避上面的问题（待研究）？
  优势：
• 方便
• 规避了要放大图片的问题
  劣势：
• 部分安卓手机，会自动把0.5px的线放大到1px线去显示。
• 不能使用border，要一个个自行去定位

4. 采用较淡的颜色色值做border-color，从视觉上感受像1PX线
   推荐的几个色值
   border-color: #ebeef4 （这个色值是JD用的）
   border-dark-color: #d2d5df
   border-light-color: #e7e8f1
   在less & px2rem中写法：
   border: 1PX solid @border-color;
   1PX大写的原因是防止被转换成rem。

优势：

• 方便
• 规避了要放大图片的问题
• 写法符合平时的习惯

劣势：

• 要说服设计狮同意这个色值做border（我们设计狮看了效果觉得完全ojbk并且补充了后面dark和light的色值）。
• 1px border在部分手机偶发性的不可见（基本可见，偶尔某个页面的一条border出问题，其他的确没有问题）

本文只是提炼和总结whistle部分功能，阅读的时候需要配合官方文档，文档地址会在本文中穿插引入。

一。whistle基本功能

(一)取代我们平时使用的哪些功能

1. 修改host（取代ihost）
2. 抓包（取代fiddler）
3. 修改请求和响应，比如添加对应的请求头可以访问生产灰度
4. url转发，比如转发agent.dinghuo123.com/app/index.html 到本地开启的服务
5. 抓远端（手机等）的包
6. 打印log（取代vconsole等）

等等

(二)更多功能

还有很多功能自己去阅读github就能看到

二。为什么要换whistle

优势

1. 拥有fiddler和ihost功能，减少多余工具的使用。
2. web端的操作页面，windows和mac统一，减少学习成本。
3. 通过rules配置host同时，也能指定对应的url path做转发，并且支持正则
4. 支持node写自定义插件
5. 支持本地log输出
6. 切换host不需要重启

注意事项

1. 和fiddler不一样，whistle不会在全局做代理，要捕获chrome请求，需要自行通过chrome插件 SwitchyOmega 做代理
   
2. 证书下载后要自行点击安装，详细步骤参考下文 【三。安装】

三。安装与启动

（一）安装：

直接参考文档：http://wproxy.org/whistle/install.html

（二）https证书：

直接参考文档：http://wproxy.org/whistle/webui/https.html

（三）手机端调试：

1. 按照上面步骤安装https证书
2. wifi开启代理到"你的ip"+"whistle启用的端口号"

（四）打印log：

1.导入附件中的rules(更多rules功能参考五和六)
2.双击启用即可

四。常用命令

$ w2 help  //查看whistle帮助信息+所有命令
$ w2 start  //启动whistle
$ w2 stop   //停止whistle
$ w2 restart  //重启whistle
$ w2 start -p 8899 //修改启用的端口

五。取代host的功能（Rules）（包含了路径转发）

参考文档：http://wproxy.org/whistle/rules/log.html
或者 http://wproxy.org/whistle/webui/log.html

配置写在rules中，常用的rules看群里附件。

记得，rules要开启允许多个规则，方便切换

开启允许多规则

六。取代fiddler的功能（Rules）

可以参考协议列表：http://wproxy.org/whistle/rules/

1. rules中修改header（已经在rules里配好）
2. rules修改response
3. 转发agent app（已经在rules里配好）

七。便捷操作

1.通过chrome添加到桌面快捷方式

2.修改、代理请求以及相应等

协议列表

六。参考文章：

• github：https://github.com/avwo/whistle
• 手册：http://wproxy.org/whistle/
• whistle--前端调试利器：https://segmentfault.com/a/1190000016058875

两个重要参数说明
`
touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
`

一. 卡顿：在使用下面这个样式做滚动的时候，IOS8的手机部分页面一直滚动失效（但是部分页面一样的样式确实可以滚的）。

二. webkit-overflow-scrolling点透：
一般存在于父级滚动，子级touchmove 的时候，带动了父级的滚动，
或者堂兄弟之间只要层级重叠就会穿透。
解决方案：

1. 兄弟级别或者堂兄弟级别去滚动，但是这样在部分浏览器上还是会造成穿透
2. 直接在不需要滚动的地方组织默认事件（e.preventDefault()）;
3. 使用iscroll或者swiper实现滚动
4. 在不需要滚动的下面加一个透明的滚动父级，然后每次每次touchmove的时候重置父级滚动距离为 0