网页自适配手机端

sunonzj

发布于 2022-06-21 10:17:22

2.5K0

发布于 2022-06-21 10:17:22

文章被收录于专栏：zjblogzjblog

博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。

之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。

之前呢，考虑到很多人通过链接在手机上打开了我的博客，为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开，如果是就弹窗提示。

<script type="text/javascript">
    /* 手机打开提示 */
     var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
     var browser = navigator.userAgent.toLowerCase();
     var isMobile = false;
     for (var i = 0; i < mobileAgent.length; i++) {
         if (browser.indexOf(mobileAgent[i]) != -1) {
             isMobile = true;
             alert("本博客手机打开不适配，建议使用电脑访问效果最佳！点击确定继续使用手机浏览");
             break;
         }
     }
</script>

效果：

这样肯定是不行的，还是得改css。html+css完全是靠在大学时老师教的那些撑着，一开始觉得完全够用，后面发现很多东西老师没有教过。接触的越多发现要学的就越多，虽然是一个后端开发，但是该学的还是得学。css最烦的就是调来调去还差点的，特别是屏幕宽度，就很无语~

手机适配的话先加个meta viewport。移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。头部加上viewport 并设置一些默认属性。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后就是css判断了，使用@media来判断屏幕宽度，再调整响应模块的scc。

/**手机适配**/
@media only screen and (max-width: 767px) {
   header{width:100%}
   .banner{width: 100%;height: 100px;}
   .avatar{width: 80px;height: 80px;margin: 6px;}
   .avatar a{padding-top: 59px;width: 80px;height: 80px;background-size: 80px 78px;}
   .avatar a span{margin-top: 0px; padding-top: 0px; width: auto;height: auto;}
.bloglist h3 {margin: 20px 0 10px 10px;}
.bloglist figure {width:auto;margin-left: 4px;}
.bloglist figure img {width: 90px;height: 60px;}
.bloglist ul{width:64%}
.dateview {width:100%;padding-left:4px;}
.dateview span {margin: 0 3px;}
.weixinnone,.thumbs{display: none}
.right{width: 100%;margin-top: 22px}
.right ul{width:64%;margin-left: 22px;}
.weather{margin: 20px 50px;}
.bloglinkli{display: block}
footer{width:100%}
}

参考下面两篇文章

viewport：viewport 深入理解

media：CSS3@media查询

没有适配手机之前的效果

首页：