c端开发常见问题

[huenchao]

1. viewport 高清问题、字体

背景：
iphone 默认980px的展示，比如iphone6 是375的宽，750的物理像素，但是一个viewport下是代表980px，也就是把375的iphone分成了980分。 这个时候虽然dpr的值是2，但是手机浏览器会重新算，正确的dpr = 750 / 980

引入meta viewport:

这里的width和initial-scale的值，就是改了viewport的值，比如ip6就是375了， 这个时候dpr就真是2了，dpr = 750 / 375

三个问题

• 高清问题，也即border: 1px的问题
• 元素宽度自适应的问题
• 字体大小问题

最早手淘flexible是以ip6 750的物理像素为标准，把屏幕分成10分。设置html的字体大小为 x rem.其中x表示1/10的屏幕宽度。不涉及viewport相关的改动。所以假设你没有给页面配置viewport，那你在iphone6上默认viewport 980px，设计师给你一个按照750的设计稿，上面是20px， 你在代码里如果写20px,放到980里可能比例不对。按照flexible的计算方式：
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}，

750 / 10 = 75.
20 / 75 rem