• 首页
  • javascript
  • 关于一介布衣博客适配pc端,移动端浏览器的一些细节分享

关于一介布衣博客适配pc端,移动端浏览器的一些细节分享


目前还处于人口红利期的移动互联网发展的大红大紫,不断侵蚀传统pc份额,所以做一个全终端自动适配的站点已经成了主流.

我的博客也是因为之前对于移动浏览器兼容太差,有些朋友提意见说UI体验也不太好,百度m站的UI亮瞎双眼......

所以决定换换UI,因为页面结构大变,已经做好了被搜索引擎惩罚的准备.


但是移动端考虑到网络环境,抛开wifi不谈,4G普及率不高,3G应该目前移动端网名主流实用的网络制式,

2.5G和2G的用户就悲剧了,站点再优化貌似对这部分人来说加载几十K,几百K甚至上几M都是 wait , wait , wait ,loading....


所以3G用户在浏览加载过程中,能节省几百K,加载速度还是明显有改善的.

针对一介布衣博客的 关于页面有几张大图轮播,所以在移动端做了一点点优化,和大家分享.


一介布衣关于页今天已经发布更新:

http://yijiebuyi.com/about.html

PC端和移动端浏览器里看到的效果是不一样的.

页面的3副大图片轮播在移动浏览器里不太实用,大半个屏幕被占用,体验也很差,而且图片很大,无形占用带宽,所以移动端看不到图片轮播.


但是单单的隐藏这个元素是没有意义的,因为我们的隐藏操作是在html载入 (图片已经被加载) 然后我们判断浏览器类型,最后隐藏对应的dom,这样并没有节省带宽,3G用户手机浏览可能依然卡在静态资源加载上.


所以我们的优化方法是:

轮播图片所在的div是一个空壳 

<div id="slide_div"> 

</div>

对,里面没有任何html内容.


当手机,pad 等浏览器加载html以后.我们找到上面的div ,然后从dom树里移除(如果div不影响布局的话,不移除也是完全没有问题的,或者隐藏显示都可以)


如果不是手机,pad都手持设备浏览时:

当页面加载完成后,我们会运行一段js文件,它的功能是加载了 2个 css 文件, 1个 javascript 文件,然后在 <div id="slide_div">里面填充了轮播图片说需要的所有html内容.


  1. 如何判断

if (navigator.userAgent.match(/Android/i) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {

}

这是一句比较常规的判断 android ,iphone ,ipad ,ipod 等手持设备浏览器的方法.


2. 自动加载css 的方法

var loadCss = function loadCss(url) {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        document.getElementsByTagName("head")[0].appendChild(link);
    };


3. 自动加载 javascript 的方法,大致和上面的一样,照猫画虎而已

var loadScript = function loadScript(url) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.body.appendChild(script);
    };

2,3 这2个方法看上去怪怪的,有没有?

按照我个人书写习惯,一般是这样定义函数

function a(){.....}

或者

var a=function(){ ..... }

但是就在前几天看到一些资料,说我上面2种方法都不好,最好的方法定义就是如 2,3 这样 var a=function a(){ ...  }

我们先这样定义,姑且不去判断哪种更优,更好,回头我会找一找证据,确凿的话,我们单独开博来说明.


4. 判断页面是否加载完成

浏览器运行在单线程上,加载完成是指页面所需要的静态资源(css ,javascript ,html )全部加载完成.我们要用到一个 docment 上的一个判断方法

document.onreadystatechange = loadSlide; //指定加载完成时调用函数的引用
function loadSlide() {
    /*页面加载完成时调用的函数 */
    /*这里面判断浏览器是PC还是手持设备*/
    /*然后根据判断条件,给出相应的内容 */ 如果是pc,这时才加载轮播需要的css,javascript,并且给轮播div空壳填充轮播html内容
}


详细的代码如下:

<script type="text/javascript">
    var loadScript = function loadScript(url) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.body.appendChild(script);
    };

    var loadCss = function loadCss(url) {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        document.getElementsByTagName("head")[0].appendChild(link);
    };

    document.onreadystatechange = loadSlide;
    function loadSlide() {
        if (document.readyState == 'complete') {
            if (navigator.userAgent.match(/Android/i) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
                var slide_div = document.getElementById('slide_div');
                slide_div.parentNode.removeChild(slide_div);
            } else {
                loadCss('/css/slidenav.min.css');
                loadCss('/css/slideshow.min.css');

                $("#slide_div").append('<ul class="uk-slideshow">\
                    <li><img src="/images/pgy_01_02.jpg" alt="">\
                    <div class="uk-caption uk-caption-panel uk-animation-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">\
                    <div>\
                    <h1 class="ns-fonts ns-fontsize-large">About Blog</h1>\
            <p class="ns-fonts ns-fontsize-small">我的技术随想录</p>\
            <a class="uk-button uk-button-primary uk-hidden-small" href="#aboutblog" data-uk-smooth-scroll>Read\
            Me</a>\
            </div>\
            </div>\
            </li>\
            <li><img src="/images/pgy_02_02.jpg" alt="">\
                    <div class="uk-caption uk-caption-panel uk-animation-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">\
                    <div>\
                    <h1 class="ns-fonts ns-fontsize-large">Contact Me</h1>\
            <p class="ns-fonts ns-fontsize-small">和我联系</p>\
            <a class="uk-button uk-button-primary uk-hidden-small" href="#contactme" data-uk-smooth-scroll>Read\
            Me</a>\
            </div>\
            </div>\
            </li>\
            <li><img src="/images/pgy_03_02.jpg" alt="">\
                    <div class="uk-caption uk-caption-panel uk-animation-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">\
                    <div>\
                    <h1 class="ns-fonts ns-fontsize-large">About Me</h1>\
            <p class="ns-fonts ns-fontsize-small">关于我</p>\
            <a class="uk-button uk-button-primary uk-hidden-small" href="#aboutme" data-uk-smooth-scroll>Read\
            Me</a>\
            </div>\
            </div>\
            </li>\
            </ul>\
            <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>\
            <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>\
            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-text-center uk-hidden-small">\
                    <li data-uk-slideshow-item="0"><a href=""></a></li>\
            <li data-uk-slideshow-item="1"><a href=""></a></li>\
            <li data-uk-slideshow-item="2"><a href=""></a></li>\
            </ul>');

                loadScript('/js/yz_slideshow.min.js');
            }
        }
    }
</script>


本博客还有一处也是类似的实现原理:

pc端显示的菜单和手持设备显示的菜单.

虽然都是博客的菜单,但是由于不同设备显示效果不一样,所以是2端完全不一样的html片段.

其实2个片段同时输出也不会占用太多带宽,不到20行html,为什么还要这样去实现?


这里考虑到的是SEO优化方面的一些问题

因为是相同内容的菜单,名称一致,对应的url也相同,每个页面出现这2个片段


SEO可能会认为是关键词堆砌

页面的权重最后是分散到了链接上,这样可能导致链接权重降低


上面的SEO方面的影响只是我个人看法,因为很久前我的博客是一套自适应模板(类似bootstrap )模板几乎在任何页面模块都有2个片段,一个是pc显示的效果,一个手持设备显示效果,当然那个模板应用了很长时间,搜索引擎索引量一直平平,没有大起,也没有大落,后来我尝试换上了上一套UI后,搜索引擎索引量是突飞猛进的增长.


总之不同时出现总是比同时出现要好,这是一定的.


******End*******




回到顶部