文章导读:本文主要阐述了“网站适配手机端的4种写法”为了顺应时代,现在做网站都要适配手机了,下面跨屏网 Kuaping.com 讲讲网站适配手机端的4种写法,rem,100%布局,JS等比缩小和...,本文由跨屏网最后更新于2020-07-27,全文共1949个字,预计阅读时长6分29秒。
为了顺应时代,现在做网站都要适配手机了,下面跨屏网 Kuaping.com 讲讲网站适配手机端的4种写法,rem,100%布局,JS等比缩小和一句话JS快速适配,其中100%布局已经是过去时了,会因为手机屏幕大小不一,显示的会略有区别,体验不太好,rem是主流做法,各种屏幕下看都显示一致,体验也比较好,JS等比缩小不推荐。
1,rem布局,现在普遍常用的方法
一般ui设计师给的页面都是750的,所以
- document.documentElement.clientWidth/7.5+“px”;
如果是640的就把750改写成640,项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
- window.οnlοad=function(){
-
- setRemSize();
- window.addEventListener(“resize”,setRemSize,false);
- function setRemSize(){
-
- var _clientWidth=document.documentElement.clientWidth/7.5+“px”;
-
- document.documentElement.style.fontSize=_clientWidth;
- }
- };
2.百分比布局这种方法比较古老,做出来的界面在各个分辨率的适配上比较不好,例如一个div在分辨率为320*568是320px * 100px 在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升。
3,按照750等比例缩放
- <script type=“text/javascript”>
- var isios = false;
- ! function(userAgent) {
- var screen_w = parseInt(window.screen.width),
- scale = screen_w / 750;
- if(/Android (\d+\.\d+)/.test(userAgent)) {
- var version = parseFloat(RegExp.$1);
- document.write(version > 2.3 ? ‘<meta name=“viewport” content=“width=750, initial-scale = ‘ + scale + ‘,user-scalable=1, minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, target-densitydpi=device-dpi”>‘ : ‘<meta name=“viewport” content=“width=750, target-densitydpi=device-dpi”>‘);
- } else {
- isios = true;
- document.write(‘<meta name=“viewport” content=“width=750, initial-scale = ‘ + scale + ‘ ,minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, user-scalable=no, target-densitydpi=device-dpi”>‘);
- }
- }(navigator.userAgent);
- </script>
4,一句话JS,快速适配手机
这种方式特别适用于,网站已经做好但是没有适配手机端的,基于跨屏网开发的跨屏平台,可以快速适配手机,只需要将一句话JS放在网站,即可快速适配手机,效果和APP或者手机网站体验无异,体验非常流畅。
写在最后,以上就是对于“网站适配手机端的4种写法”的一些看法,欢迎指正、交流。
名称栏目:网站适配手机端的4种写法
网页链接:http://test.kuaping.com/article/show253.html