1 | .no-touch { |
添加一个类,对于需要禁止的dom添加这个类
1 | ontouchstart="return false;" |
在需要禁止的dom上添加这段代码
两种方法对于安卓和IOS的支持我没有单独测试。两个同时使用,对于安卓和IOS可以起到禁止作用。
1、在手机UC浏览器中,如果添加了这段meta标签,则全文无法长按调起菜单:
1 | <meta name="browsermode" content="application"/><!-- uc不能复制网页内容 需要复制去掉即可--> |
2、在手机QQ浏览器(IOS版本)中,长按会弹出保存图片选项(还没有找到原因):
新增事件 contextmenu 可以实现:
1 | $('button').bind('contextmenu', function(e) { |
这就比较尴尬了,因为webview肯定不知道iframe的高度,所以需要iframe给传一个高度出来。
经过一番查找之后,知道了一种很方便的方法-postMessage方法。
otherWindow.postMessage(data, origin, [transfer]);
otherWindow
data
origin
transfer(可选)
父页面:
1 | <body> |
iframe页面
1 | <body> |
父页面:
1 | <body> |
iframe页面
1 | <body> |
通过这两个简单的例子我们会发现postMessage的强大之处,有了postMessage,我们甚至可以在两个iframe之间传送数据,只需要一个共同的父元素做中间页。
兼容性:
通过图上可以看出,基本大部分的都能兼容的,但是需要注意一下这句话。
Internet Explorer 8 and 9, and Firefox versions 6.0 and below only support strings as postMessage’s message.(ie 8和9,和Firefox 6.0及以下版本只支持字符串作为postMessage的消息。)
所以如果需要支持这些版本的需要注意data只能是字符串。
安全性:
在线上进行交互时,最好做好安全措施,对于postMessage,最好采用“双向安全机制”。发送方发送数据的时候,确认接受方的源(所以最好不要用*),而接受方监听到message事件后,也可以用event.origin判断是否来自于正确可靠的发送方。并且最好做一下传递数据的数据类型校验。如以下代码:
1 | function checkMessage(event) { |
并且通过不同的type可以处理不同的数据,如以下代码:
1 | switch (checkMessage(event)) { |
我灵光一现,那能不能把我的bolg也加上https了??说干就干,申请https的ca证书,还是很方便的,申请一个,半个小时都要不了。
只需要到阿里云的安全里面,有一个证书服务。
点进去以后,然后购买免费DV SLL云证书就可以了,之后就是域名和一些身份信息的验证,然后你就能拿到你的密匙了。
阿里云这里做的很好,对于不同的服务器都有不同的配置说明,只需要照着配置去修改就可以了。
因为我的服务器配置是nginx,所以我就参照这个阿里云的配置,进行了配置,这里贴一下我的nginx配置。
在配置https的情况中,遇到了一些问题,这里总结一下
1、80端口访问问题:
1 | listen 443 ssl; |
在把ssl打开后,80端口的访问全部会被nginx拒绝掉,并且抛出一个497错误。
查了资料,可以利用497错误将连接重定向到https的域名,参照我的配置即可。
2、七牛云存储无法访问问题
添加https后,七牛云存储的图片都无法访问了(可以配置https请求,但是这就需要钱了,问题是最缺的就是钱)。没有办法,只有把七牛的博客图片全部都签回自己的云服务器。
3、主题的报错统计反馈无法执行
在yilia中有一段错误统计代码,会将错误反馈给litten大神,也是因为https的限制,导致这个请求无法发送,不得已只有把这段JS代码屏蔽掉了。
]]>没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么。所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法。
其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。
在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Connor 讲到关于“retina
hairlines”(retina 极细的线):在retina屏上仅仅显示1物理像素的边框,开发者应该如何处理呢。
他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框:
额的神呐!so easy! 果真如此吗?
这样还不够(WWDC幻灯片通常是“唬人”的),但是相差不多。
问题是 retina 屏的浏览器可能不认识0.5px的边框,将会把它解释成0px,没有边框。包括 iOS 7 和之前版本,OS X Mavericks 及以前版本,还有 Android 设备。
解决方案:
解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框,如果可以,给html标签元素添加个class。
1 | if (window.devicePixelRatio && devicePixelRatio >= 2) { |
然后,极细的边框样式就容易了:
1 | div { |
优点:
缺点:
准备一张符合你要求的border-image:
样式设置:
1 | .border-bottom-1px { |
上文是把border设置在边框的底部,所以使用的图片是2px高,上部的1px颜色为透明,下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border,可以使用下面的border-image:
样式设置:
1 | .border-image-1px { |
到目前为止,我们已经能在iphone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:
1 | .border-image-1px { |
优点:
缺点:
background-image 跟border-image的方法一样,你要先准备一张符合你要求的图片。然后将边框模拟在背景上。
样式设置:
1 | .background-image-1px { |
优点:
缺点:
与background-image方案类似,只是将图片替换为css3渐变。设置1px的渐变背景,50%有颜色,50%透明。
样式设置:
1 | .background-gradient-1px { |
优点:
缺点:
利用css 对阴影处理的方式实现0.5px的效果
样式设置:
1 | .box-shadow-1px { |
优点:
缺点:
同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时,输出viewport:
1 | <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> |
在devicePixelRatio = 3 时,输出viewport:
1 | <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no"> |
这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。
对于这种方案,可以看看《使用Flexible实现手淘H5页面的终端适配》
优点:
缺点:
对于老项目,有没有什么办法能兼容1px的尴尬问题了,个人认为伪类+transform是比较完美的方法了。
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。
单条border样式设置:
1 | .scale-1px{ |
四条boder样式设置:
1 | .scale-1px{ |
最好在使用前也判断一下,结合 JS 代码,判断是否 Retina 屏:
1 | if(window.devicePixelRatio && devicePixelRatio >= 2){ |
优点:
缺点:
那就只有看看网上的云存储有什么比较好的了,最早的时候,我用的图床是贴图库,之前他可以无限流量,不限时间,但是现在保存时间只能有6个月了。
那肯定不行啊,所以只有换一个了,查了资料,发现了七牛云存储,有一个专门的hexo的七牛插件:hexo-qiniu-sync,但是这个插件有个问题,就是只会把本地文件同步到七牛。这跟我的设想完全不符。
最后我发现了一个神器——极简图床
下面就来讲一讲如何配置七牛以及极简图床:
注册的流程就不说了,注册成功以后,需要做的是:
极简图床对于七牛的配置也非常简单,只需要填入一些参数即可
并且极简图床支持markdown语法的复制,可以一步到位,几乎无伤~真是超赞。
]]>之前用过wordpress、leanote来搭建自己的博客。但是又不是很满意,wordpress是用PHP来搭的,这个作为一个坚信前端统治世界的人怎么能忍受!leanote是因为笔记同步的时候老是会出现一些莫名其妙的bug,故弃之。
无意中看到了hexo搭建的博客,从此就迷上了它,它基于markdown书写,与简书和印象笔记完美的对应起来了,所以就开始了折腾之旅。
印象笔记对markdown的支持不是很友好,所以又去折腾了sublime的markdown语法以及印象笔记的支持,有兴趣的可以看看这篇《程序猿进阶之路——用Sublime配制Evernote全解》,这下就完美了,只差搭建hexo博客了。
折腾了一阵,纠结症又犯了,对于主题的选择又开始了,在这篇文章了中纠结了《有哪些好看的 Hexo 主题?》半天。最后还是选择yilia主题,然后又是一番折腾,添加了简书和SF的图标,又通过查看litten的相册代码,自己写了一个很垃圾的nodejs抓取脚本,有时间放在github上一起分享。
希望以后努力完善我的博客,哈哈~
]]>