css - 移动端适配与不适配方案探讨
怪我咯
怪我咯 2017-04-17 14:28:35
0
0
341

方案一:
JS 定宽,改变缩放值
Viewport 方式定宽
Html字体设置为100px;
body给个max-width
判断低版本浏览器
优势:直接根据设计图出稿,简单出暴;
缺点:不能1:1像素还原等等

1:JS 定宽,改变缩放值 function ScaleW(){ var w=window.screen.width; var targetW=640; var scale=w/targetW; var meta=document.createElement('meta'); meta.name='viewport'; meta.content='initial-scale='+scale+',maximum-scale='+scale+', user-scalable=no'; document.head.appendChild(meta); } ScaleW(); window.addEventListener("resize",ScaleW,false); 2:Viewport 方式定宽 meta vieportcontent=" width=640,user-scalable=no"

方案二:
手淘的Flexible的方案;
优势:1:1像素还原等其它公认的
缺点:个人在chrome模拟器下浏览,会感觉跟设计图有偏差,这个偏差是指设计图是是按照640的宽度设计,因为做了像素还原,所以看起来有点变扭

不知道大家都是用哪种方案的?

怪我咯
怪我咯

走同样的路,发现不同的人生

모든 응답 (0)
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!