网站建设

解决IE响应式的解决方案css3-mediaqueries.js不生效问题

前阵子解决了博客在低版本IE下会假死的问题,发现居然是因为我自定义CSS的闭合误用了中文大括号导致的! 解决这个问题之后,又发现了另外一个坑:发现博客在IE8及以下版本的响应式不生效。 奇了怪了,记得鸟哥老早更新Begin的时候就解决了这个IE下CSS3响应式问题,咋就无效呢? 看了下源代码,发现Begin下会在head部分引入如下代码: 其中 css3-mediaqueries 就是用来解决IE8及以下版本浏览器不支持 CSS3 media queries 的问题的。 大概工作原理想想知道,应该就是用js的方式,先取得写好的css3属性,然后动态改变元素样式,从而解决兼容性问题。当然,这种方式肯定会比纯css效率低得多,IE下很明显会略显迟钝,大家自行体验。 经过测试发现,鸟哥的博客在IE8下的响应式除了略卡一点,并没有出现响应式失效的情况,为啥我博客就不行呢?苦逼重复的替换了几次js文件、刷新各种缓存,硬是没有解决! 没办法了,看来还得求助搜索引擎了。最终,发现居然因为这个js不支持跨域(文章忘记收藏了)! 也就是说,这2个js只能用和主站一样的域名,而不能用其他域名,否则就不会生效! 好吧,懒得去深究为什么它不支持跨域了,直接把上述代码修改如下就搞定了: 问题终于得到解决,可以安心睡觉了! 最新补充:上次全量更新Begin主题的时候,发现问题又重现了!按照本文的经验处理之后还是不行,于是又折腾了大半天,终于搞清楚上文说的不支持跨域指的什么了。 原来,不支持跨域不是说这个js,而是指含有响应式代码的CSS文件! 这里说的响应式CSS代码是如下形式: 也就是说,如果要让css3-mediaqueries.js生效,那么含有上述响应式的css代码就不能跨域! 比如,Begin主题大部分响应式属性的代码都写在了style.css,那么要解决这个IE兼容性问题,只需要将style.css使用和网站相同的域名即可,而不能使用二级域名的CDN了! 如果是强迫症,可能觉得不够爽,因为style.css算是比较大的文件了!不用CDN总是觉得是一个带宽占用大户! 如何解决这个问题呢?很简单!将style.css中响应式写法的css代码全部复制一份,放到额外的一个css文件中,然后使用和网站相同域名,引入到head部分的IE判断语句中即可! 比如,张戈博客如下引入: 其中 /wp-content/themes/begin/OldIE.css 就是放了主题所有的响应式CSS属性,使用了相对路径,不再使用CDN,且只在IE9以下的浏览器生效!从而完美解决IE兼容性问题!
阅读全文
网站建设

JS代码实现浏览器网页标题的动态切换,略微提高网站粘性

前几天在微饭天空看到一个让我眼前一亮的分享,自己拿过来用了几天之后,感觉挺有意思,现在我略微改进一下并分享出来,方便更多人自定义成自己喜欢的内容。 一、原版分享 功能描述:当网页标签失去焦点切换到指定的标题,获得焦点时即恢复正常标题 功能预览: 原版代码(可用代码①): 部署方法: 将以下代码加入主题下的footer.php或者header.php文件中即可(Ps:添加到Jquery.js之后,否则无效)。 更多表情:  注:以上内容来自微饭的分享:《WordPress优化:为你的标题添加动态切换效果!》 二、改进分享 说是改进,其实也就是加入了我的一些理解,所谓萝卜白菜各有所爱,喜欢哪个就用哪个吧!我加入这个功能后,发现同时打开多个博客网页会带来影响用户体验的尴尬:未激活的标签标题全部显示“(●—●) 你好,小伙伴!”这种相同的标题,不点击看看还真不知道是哪个页面。 那就稍微小改动一下,增加一个获取原始标题的变量 title,并组合起来一起展示,至少把鼠标放上去能够知道该页面到底是哪篇文章,效果如下: 当然,只修改微饭分享的代码中的文字描述,很可能会报错或展示成undefined啥啥啥。 我先将原版代码解密一下: 这样就直观多了,然后在自定义内容后拼接原始标题(变量a、b 或 d)即可(可用代码②): 你可以将代码中的提示文字改成你喜欢的,并在浏览器开发者模式【F12 】下的控制台(console)中粘贴并回车,然后切换网页标题就能实时看到效果了: 为了进一步提高用户体验,我们还可以排除首页,在多个窗口都出现自定义标题的时候,至少还可以快速定位到首页,所以我将代码继续小改如下(可用代码③): 部署后,若发现提示 undefined,很可能是编码问题,可以将代码先编码一下: 当然也可以混淆加密一下保持神秘性。比如,先混淆再加密的代码如下: 如果你喜欢这种混淆加密的赶脚,可以试试这个流弊强悍的在线工具:http://tool.lu/js/ 三、惯例小结 喜欢动脑筋的朋友有没有看出这个功能的优点呢?当用户在博客在新标签点开另一篇文章时,之前打开的文章标题就会自动变成【o(∩_∩)o 温故而知新,回头再看看吧!→《之前的文章标题》】,在挑起用户好奇的同时,略微提高文章的回头率。 当然,弊端也是固然存在的,当一次性打开多个网页时,不但标签页会自动变窄导致看不全,而且看起来全部都一个样,导致用户想回头找一下刚刚看过的文章都必须用鼠标聚焦或点击查看。 好了,分享就到这里结束了,个中利弊就只能自己取舍了!喜欢折腾的朋友赶紧试试吧!
阅读全文
网站建设

解决JS操作Cookies出现的乱码问题,修复Wordpress评论乱码

为了解决博客纯静态之后无法记住用户信息的问题,我将这个功能改成JS操作Cookie的方式,将用户信息直接保存到用户本地cookies当中,从而脱离php不再受缓存的影响。不过,近来偶尔发现有个别评论乱码了,如下所示: 看了下乱码的组成,发现已被被转成URL编码格式。本以为是我上次自己写的js不够完善的原因,于是我从ZBLOG中移植了记住评论信息的JS代码。 更改后,观察了几天,发现还是偶尔会有这种URL转码现象,于是决心解决一下这个问题。 考虑了半天,发现问题其实很好解决,只要在保存cookies的时候先进行url转码,然后再取出的时候在进行url解码就行了!有了思路,问题很快就得到了解决! 在js中使用encodeURIComponent 和 decodeURIComponent,前者是将内容进行url编码,后者则是将url解码。 于是,将记住评论信息的JS稍作修改即可搞定(JS原代码来自ZBLOG-ASP): 这样改进之后,浏览器将会以url编码来保存用户信息,待读取的时候再进行url解码,从而解决偶尔产生的乱码问题: 本文仅分享解决cookies乱码的思路,如何部署该功能请查看张戈博客之前的文章:https://zhang.ge/4538.html
阅读全文