Mobile-Web-Develope2

总结一下最近遇到的问题：

布局方面：

  • margin是根据父元素width宽度计算百分比的，并不是垂直方向根据父元素高度水平方向根据父元素宽度；===》解决方案：尽量不用百分比；
  • 并不是所有手机都支持vw和vh单位（比如魅族M1）===》解决方案：不用vw和vh，vmin和vmax，改用rem
  • em相比px更具有响应式特点，但em是相对值，而如果通篇用rem写布局会出现大屏手机整平内容过少或小屏手机整平内容过多的现象，sad ===》解决方案：flexible.js，字体px
  • inline-block自动产生的间隙可用display：table解决（目前还没找到适合强迫症的看起来不投机取巧的解决方法，负margin的方法亲测无用不知为何）
  • 当input的type属性为search时，手机上会自动出现一个难看的‘X’作为清空按钮 ===》解决方案：
1
2
3
4
5
6
input[type='search']::-webkit-search-decoration, 
input[type='search']::-webkit-search-cancel-button, 
input[type='search']::-webkit-search-results-button, 
input[type='search']::-webkit-search-results-decoration {
    display: none;
}

其他方面：

  • input的placeholder在某些手机浏览器上垂直不居中，stackoverflow上有相关提问，提出的解决方案多种多样，然而我并没有找到真正有效的，可能是魅族自带浏览器比较奇葩吧。附stackoverflow相关讨论地址。
  • 锚点跳转时若存在fixed导航条时则跳转结果有微妙差别，知乎上有人回答了==》知乎问题

啊暂时就想到以上这些，晚安吧。