微信Web开发者工具试用

企鹅发布了自家出的微信Web开发者工具,下来尝下鲜。

使用环境:

可能期望太高,导致有些失望,有一些痛点没有实现:

预览页面尺寸

很多场景下我希望可以看到的是实际可视区域,即扣除软件自带工具条后的区域的尺寸。比如滑动切屏一次一整屏的设计,会希望可以借由真实尺寸去预览底图的比例。

而这一版软件的模拟器,把工具条放在了视窗外,可视区域始终是标准设备全屏尺寸。

滚动条悬浮

手机端的滚动条,大多和Mac下的行为一致,即滚动条不占据页面空间,漂浮在页面上层。

调试器会在页面上添加一段CSS去定义全局滚动条样式,并且在一般场景下工作正常:

::-webkit-scrollbar{ 
    width: 10px; height: 10px; background-color: #FFF;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{ 
    display: block;
}
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement{
    display: none;
}
::-webkit-scrollbar-button:end:increment{
    background-color: transparent;
}
::-webkit-scrollbar-button:start:decrement{
    background-color: transparent;
}
::-webkit-scrollbar-track-piece:vertical:start{
    background-color: transparent;
}
::-webkit-scrollbar-track-piece:vertical:end{
    background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical{
    background: rgb(191, 191, 191);
}

但是发现跟我偷懒写的代码冲突:

html, body{
    height: 100%; overflow-y: scroll;
}

这时候,如果内容超出单屏高度触发了overflow: scroll,则body宽度变成了(全屏宽度 - 10)。比如在iPhone 6P的模拟器模式下,console中html元素的clientWidth为414,body元素的clientWidth则变成了404。但是在真机下看则是全屏的。

CSS老老实实写成这样才能正常展示。

html, body{
    height: 100%;
}
body{
    overflow-y: scroll;
}