分类 未分类 下的文章

微软明年将发布自己的VR硬件，并且会在win10中集成VR软件环境。这是个VR时代即将到来的强烈信号。
目前VR有两大阵营，台式电脑加头显，手机加VR盒子。前者价格较高并且效果更好，问题是你得像使用台式电脑一样，不能乱跑。后者有任意移动的自由，你可以躺在沙发上，床上，走在路上或者其他什么地方使用。
但我认为目前VR的移动场景并不见得比固定场景更广。因为VR重在提供完全的沉浸体验，它的优势是虚拟世界与现实世界的隔离。而与现实场景的结合是AR的优势。当然也有可能出现以VR技术提供AR体验的方式，那是另一个主题了。因此，VR的大发展很可能是从固定平台而不是移动平台上，这有可能将人们从手机屏幕重新带回到电脑桌前。
软件两大类，工具和游戏。目前VR的一大主要吸引点是在游戏上，但VR在工具类特别是办公应用上相信也大有可为。因为工具类应用对于操作面积也很大，想象一下没有空间限制的屏幕，我可以把所有窗口平铺出来，而不需要去在任务栏一个一个切换了。
配合手势识别，VR同时会带来输入方式的革新，相当于发明和制造新一代的键盘鼠标，看看现在鼠标键盘的普及程度和品牌数量，未来必将爆发一大批的输入硬件制造商。

asar打包

当你使用asar打包app目录

asar app app.asar

打包后的app.asar目录结构中是没有顶级目录app的. 也就是说, app下面的文件和文件夹直接在app.asar的根目录内;你可以用asar list app.asar查看

main.js

main.js是特殊的js, 其中的所有函数,变量,在网页中的js都是不能访问的. 两者之间通讯是通过ipcMain和ipcRenderer互相发送和监听消息.

asar包

在electron中, asar包表现的像是一个真正的目录, 但最重要的是,它是只读的, 你不能向其中写入和修改文件.

position定位四属性: fixed, absolute, relative, static.
前三个属性属于定位属性,static是非定位属性,也是默认值.
fixed是脱离整个文档,相对于屏幕定位, 貌似无论在文档的什么位置/什么嵌套深度里面fixed都一样.
absolute是相对于最近的前代定位元素进行定位的. 意味着并不会相对于前代是static的元素定位.
relative和static的区别,如果没有加上left/top参数的话, 可能也就是在"是否是定位属性"这一点上.
如果本级absolute元素没有像想象的那样定位,那就要看前代的元素哪一个不是定位元素了.

官网上Node.js已经到了7.1.0, 去年8月才发的v4,才一年多一点就v7了...这是什么节奏, 追chrome吗?
尝鲜主义者我就赶快把本机的v5升级到最新的v7.1.0, 然后...我勒个去, 去electron的项目npm install 都失败了...
赶快降级回到v5, 这才成功啊

npm install的时候常常会文件夹深度远超过windows限制(貌似只有200多个字符), 要干掉这个文件夹的时候, 直接删除就会遇到文件夹深度太深的无法删除的问题.
两个方法解决:
1. npm uninstall
不过这种方式有时候也不奏效, 那就另一个大法:
2. robocopy
robocopy居然是windows的自带命令, 从来不知道哦.
比如你想干掉的目录叫node_modules, 在它同级建立一个空目录,如empty

mkdir empty
robocopy empty node_modules /mir
rd node_modules
rd empty

绝大多数情况可以搞定.

近期在产品中发现JS获取不同浏览器的尺寸, 返回结果大不一样, 主要问题出现在华为浏览器(甚至最新的P9)和UC浏览器(11.0.8版本)上.
测试的尺寸包括:

  • document.documentElement.clientWidth /Height
  • document.body.clientWidth /Height
  • window.innerWidth /Height
  • window.outerWidth /Height
  • screen.Width /Height

通过调整viewport的两个属性看尺寸是否有相应的变化, 一种scale为1.0:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

另一种scale为0.5:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">

下表中加粗标出了的尺寸.

huawei chrome mobile huawei 360 mobile huawei QQ mobile browser
scale = 1.0
document.documentElement.clientW/H 360 x 559 360 x 526 360 x 511
document.body.clientW/H 344 x 359 344 x 359 344 x 322
window.innerW/H 360 x 559 360 x 526 360 x 511
window.outerW/H 360 x 559 360 x 526 360 x 511
screen.W/H 360 x 640 360 x 640 360 x 640
UA, scale=1 Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2913.5 Mobile Safari/537.36 Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.94 Mobile Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
scale = 0.5
document.documentElement.clientW/H 720 x 1118 720 x 1052 720 x 1022
document.body.clientW/H 704 x 359 704 x 359 704 x 322
window.innerW/H 720 x 1118 720 x 1052 720 x 1022
window.outerW/H 360 x 559 360 x 526 360 x 511
screen.W/H 360 x 640 360 x 640 360 x 640
UA, scale=0.5 Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2913.5 Mobile Safari/537.36 Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.94 Mobile Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
huawei browser huawei UC mobile chrome desktop simulator galaxy s5
scale = 1.0
document.documentElement.clientW/H 360 x 508 360 x 518 360 x 640
document.body.clientW/H 344 x 325 344 x 318 344 x 310
window.innerW/H 360 x 508 360 x 518 360 x 640
window.outerW/H 720 x 1112 360 x 518 360 x 640
screen.W/H 720 x 1280 360 x 640 360 x 640
UA, scale=1 Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.3 Mobile Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.4.2; zh-CN; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36 Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36
scale = 0.5
document.documentElement.clientW/H 720 x 1016 720 x 1036 720 x 1280
document.body.clientW/H 704 x 325 704 x 318 704 x 310
window.innerW/H 720 x 1016 720 x 1036 720 x 1280
window.outerW/H 720 x 1112 360 x 518 360 x 640
screen.W/H 720 x 1280 360 x 640 360 x 640
UA, scale=0.5 Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.3 Mobile Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.4.2; zh-CN; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36 Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36
chrome desktop hongmi 1s UC 11.0.8 hongmi 1s UC 11.2
scale = 1.0
document.documentElement.clientW/H 1920 x 990 360 x 518 360 x 518
document.body.clientW/H 1904 x 310 344 x 316 344 x 318
window.innerW/H 1920 x 990 360 x 518 360 x 518
window.outerW/H 1920 x 1080 720 x 1134 360 x 518
screen.W/H 1920 x 1080 720 x 1280 360 x 640
UA, scale=1 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/11.0.8.858 U3/0.8.0 Mobile Safari/534.30 Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36
scale = 0.5
document.documentElement.clientW/H 1920 x 990 360 x 518 720 x 1036
document.body.clientW/H 1904 x 310 344 x 316 704 x 318
window.innerW/H 1920 x 990 360 x 518 720 x 1036
window.outerW/H 1920 x 1080 720 x 1134 360 x 518
screen.W/H 1920 x 1080 720 x 1280 360 x 640
UA, scale=0.5 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/11.0.8.858 U3/0.8.0 Mobile Safari/534.30 Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36
iOS 10.1 iPhone5 safari iOS 9.3.4 iPhone6 Safari iOS 10.1 iPhone5 Wechat
scale = 1.0
document.documentElement.clientW/H 320 x 460 375 x 559 320 x 504
document.body.clientW/H 304 x 440 359 x 440 304 x 440
window.innerW/H 640 x 920 375 x 559 320 x 504
window.outerW/H 0 x 0 0 x 0 0 x 0
screen.W/H 320 x 568 375 x 667 320 x 568
UA, scale=1 Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B100 Safari/602.1 Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_4 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G35 Safari/601.1 Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100 MicroMessenger/6.3.30 NetType/WIFI Language/zh_CN
scale = 0.5
document.documentElement.clientW/H 640 x 920 750 x 1118 640 x 1008
document.body.clientW/H 624 x 346 734 x 346 624 x 346
window.innerW/H 640 x 920 375 x 559 640 x 1007
window.outerW/H 0 x 0 0 x 0 0 x 0
screen.W/H 320 x 568 375 x 667 320 x 568
UA, scale=0.5 Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B100 Safari/602.1 Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_4 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G35 Safari/601.1 Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100 MicroMessenger/6.3.30 NetType/WIFI Language/zh_CN

上表中有一个现象是, iphone5 safari中的小时高度是最小的, 只有460. iphone6 换算为320宽度时, 高度为477.

使用了weinre进行测试. 通过width()函数输出到console, 测试的页面如下:

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <meta id="vp" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="http://192.168.0.143:8888/target/target-script-min.js"></script>
</head>

<body>
    <button style="font-size: 50px" onclick="width()">width</button>
    <script type="text/javascript">
        function changevp(scale) {
            document.getElementById("vp").setAttribute("content", "width=device-width, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no")

        }

        function getOutput(scale) {
            return document.documentElement.clientWidth + " x " + document.documentElement.clientHeight + "\t: document.documentElement.clientW/H\n" +
                document.body.clientWidth + " x " + document.body.clientHeight + "\t: document.body.clientW/H\n" +
                window.innerWidth + " x " + window.innerHeight + "\t: window.innerW/H\n" +
                window.outerWidth + " x " + window.outerHeight + "\t: window.outerW/H\n" +
                screen.width + " x " + screen.height + "\t: screen.W/H\n" +
                navigator.userAgent + "\t: UA, scale=" + scale
        }

        function width() {
            var scale = 1
            changevp(scale)
            var str = getOutput(scale)

            console.log(str)
            var scale = 0.5
            changevp(scale)
            var str = getOutput(scale)

            console.log(str)

        }
    </script>
</body>

</html>

1) android chrome浏览器(含微信)

移动浏览器如果是基于chrome的, 比较简单, 以Windows作为调试端,如下:

android端

USB连接android和电脑,
打开chrome,进入网页

调试端

打开chrome, 输入 chrome://inspect
应该可以看到android chrome打开的网页,点击inspect调试

2) IOS safari浏览器

以MAC上的safari作为调试端

IOS端

USB lightning线连接iphone和mac, 点击"信任"此电脑
打开"设置->safari->高级->WEB检查器"
打开safari,进入网页

MAC端

打开safari, 菜单进入并勾选"Safari->偏好设置->高级->在菜单栏显示"开发"菜单"
点击"开发->[你的iphone名称]->开启调试"
再次点击"开发->[你的iphone名称]",应该就能看到IOS上打开的页面,点击对应的页面进行调试

3) 调试任意移动浏览器

主要看这一篇介绍,因为调试android 里面提及到三种不同的方式:

weinre

weinre是在上面方式都无效的情况下, 我比较推荐这一种.
* 使用NPM安装
npm install -g weinre
* weinre可以用命令行加参数运行,不过为了方便起见, 在用户根目录下建立一个配置文件更好(用户根目录,在windows下面可能是是 C:\Users\Username, 在Linux下是~).
建立文件夹.weinre ,建立文件server.properties , 文件内容如下:

boundHost:    -all-
httpPort:     8888
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

释义: boundHost是绑定到的主机,默认是localhost, 不过如果是这样就不能远程访问了. -all-允许一切访问, 也可以改为本机真实ip, httpPort是访问的端口.
命令行运行:
weinre
假如说你的调试端ip是a.b.c.d, 在需要调试的页面插入如下script

在手机端打开http://a.b.c.d:8888 ,先看一下能不能访问. 可以的话, 在手机浏览器打开上面要调试的页面.
在调试端浏览器打开http://a.b.c.d:8888/client ,就可以进行调试了.
需要注意的是, 调试期间, 手机屏幕不能关闭, 否则调试会断掉, 并且在刷新前无法恢复. android手机可以在"设置->辅助功能->开发者选项"中, 打开不锁定屏幕, 并把android手机插上电.

jsconsole.com

这个更简单一些, jsconsole.com这个网站相当于搭建好了调试服务器和客户端. 在被调试端的pages嵌入一段