关于一介布衣博客适配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内容.
如何判断
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*******