浅谈首屏开发的注意点和兼容问题

最新推荐文章于 2024-03-05 16:30:26 发布

大兵的小码农

最新推荐文章于 2024-03-05 16:30:26 发布

阅读量173

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/koliase/article/details/121038494

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文分享了一位前端开发者在首屏优化和移动端适配方面遇到的问题及解决方案，包括使用postcss-pxtorem进行px转rem、资源通过cdn加速、处理微信和系统放大模式、实现骨架图防止白屏、Vue框架按需加载以及底部栏兼容处理等技巧。通过这些烫过的坑，提醒开发者需要考虑各种场景和用户体验。

摘要由CSDN通过智能技术生成

一、首屏优化

二、烫过的坑

1、移动端适配（px）：ui切稿基底，一般是按iphone6的750px切的，用postcss-pxtorem插件，具体的在我其他文章中，或者你谷一下，都有写呢！

2、cdn配置，记住所有的资源走cdn，这是程序员的自尊和骄傲，具体的配置按自己的框架去修改

3、微信和系统放大，简称老人模式

4、骨架图，防止白屏。你不确定你的小用户当在是不是在弱网的厕所小角落刷着你的小白屏，给他的闪光光的骨架图起码人家知道你是网络不好，不是你页面shi啦！！！！！

5、vue的框架的优化，主app.css和js要按需加载，别都塞在一起

6、css底部栏加高、微信底部垫高兼容：目前的主流长屏幕手机很多，所以记得底部加高

三、后续

一、首屏优化

作为一个前端小菜菜，在工作中接连两次承接了不同公司的首屏项目。原以为功能没问题，无功能bug，那不就功成身退。

测试开始：诶，这个手机怎么错乱了？诶，这个弱网，白色也太丑了，诶，这个请求图片怎么这么慢

产品：我的手机效果不对啊，诶这个怎么没有淘宝好看啊，诶，人家的怎么怎么。。。。。

我：你说什么？之前没要求啊？哈？什么你换成老人模式，哈？哈？哈？

总而言之，言而总之，一个好的程序员不仅同时需要是测试、产品、多重身份，更重要的是你必须是个好演员，因为作为一个95后，你会想到把手机的字体调成n倍大嘛，就是一个屏幕就10个字那种嘛，不会是吗！那就对了，不会你就好好看看一下这些用血泪烫过的坑

二、烫过的坑

1、移动端适配（px）：ui切稿基底，一般是按iphone6的750px切的，用postcss-pxtorem插件，具体的在我其他文章中，或者你谷一下，都有写呢！
2、cdn配置，记住所有的资源走cdn，这是程序员的自尊和骄傲，具体的配置按自己的框架去修改

3、微信和系统放大，简称老人模式

//ios
body{
    -webkit-text-size-adjust: 100% !important;
}

//安卓系统

(function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
})();
————————————————
版权声明：本文为CSDN博主「GEVAS」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_30068989/article/details/87861051