saber 酱的抱枕

Fly me to the moon

01/1
2017
软件

使用Chrome浏览器调试Android手机上的网页

调试移动设备上的网页很麻烦,因为手机上基本没什么调试工具。我们最常用的办法应该是在pc上模拟网页在手机里的运行效果,但如果遇到用模拟不能解决的问题,就又要发愁了。

倒闭公司谷人希家的chrome浏览器可以使用USB数据线调试Android手机上的网页,很好用,最近我找了些教程试了试,把步骤记录一下。

首先手机要是Android的,需要打开开发者模式并开启USB调试。

然后用手机上的浏览器(不知是否所有浏览器都可以,推荐用手机版chrome)打开要调试的网页,并使用USB数据线把手机连接到电脑上(如果有模式选择,可以选择传文件模式,不要选择仅充电)。电脑上需要有这个手机的驱动,如果没有驱动得自己去装(现在多数手机插上就会自动装驱动了吧)。

之后在电脑上chrome地址栏里打开chrome://inspect/#devices,会自动扫描通过USB连接的设备。

这个阶段可能在手机上会弹出USB调试的确认框,点同意。这样,chrome中就会显示出手机以及手机上打开的网页了。

使用Chrome浏览器调试Android手机上的网页

要调试某个网页的话,点击它下面的“inspect”就可以了。chrome会打开一个新的窗口来显示这个页面,之后我们就可以用开发者工具来调试了:

使用Chrome浏览器调试Android手机上的网页

如果操作步骤和设备都符合要求却不能显示/调试设备,那么可以尝试翻墙。

相关资料:《移动端Web开发调试之Chrome远程调试》

使用Chrome浏览器调试Android手机上的网页

10/11
2015
学习

手机网页上拨打电话的tel链接

在手机网页上拨打电话的链接是tel:链接,形如:

<a href="tel:01088888888"></a>

今天在使用中遇到了一些问题,记录下来:
1.电话号码中间不要加分隔符,如tel:010-88888888是不行的。
2.在某些小米手机自带的浏览器中(也许不是所有miui版本上都这样),电话所在的这个a标签不能有target属性,例如下面的例子会导致错误链接:

<a target="_blank" href="tel:01088888888"></a>

3.iphone上的Safari默认会把电话号码的数字识别为电话号码,此时点击这串数字可拨打电话,同时数字的表现形式变得形同一个a标签。为了防止这个问题,可以加上以下meta信息:

<meta name="format-detection" content="telephone=no" />

评论里提到QQ浏览器了,它有个缺陷。如果你在css中写了句通用的a标签的颜色:

a{color:#fff;}

这是没卵用的,如果你不对一个a标签在css内精准选择它并为其指定颜色,或者没给它在行内样式设置颜色,QQ浏览器就把它显示为紫色,就像电脑上被点击过的链接的颜色一样。很难看。
UC浏览器连rgba颜色都不支持。
ps:又发现了miui自带的浏览器的一个奇葩问题。同事设置某处字体大小的时候,css选择器里面使用了b这个标签,结果在miui自带浏览器上显示的始终是浏览器的最小字号。最后终于发现了这个问题,不使用b标签做选择器,问题解决了。

手机网页上拨打电话的tel链接

08/5
2014
学习

在网页上打开qq聊天窗口的代码

在网页上,我们可以使用腾讯提供的API来打开一个qq窗口,与指定的QQ号聊天。把A标签的href设置如下:

http://wpa.qq.com/msgrd?v=3&uin=592333407&site=qq&menu=yes

点击这个网址之后,腾讯会在返回的网页里打开一个协议链接,如下:

tencent://message/?uin=592333407&Site=qq&Menu=yes

这时候浏览器可能会询问你是否允许打开窗口,允许的话就会弹出qq的聊天窗口了。

在网页上打开qq聊天窗口的代码

这是chrome浏览器的提示。

注意,我在chrome上测试时,发现a标签的target一定要设置为_blank才行。如果我们不跳转新页面,而是直接在本页面打开qq聊天链接的话,提示框会一闪而过,然后页面就变回原本的网页了,我们根本没法点同意。
(如果强迫症不想打开新页面,还有一个办法就是在本页面创建一个iframe,把iframe的src设置为QQ链接一样能正常用)

ps:上面的代码我只在pc端用过,没试过移动端是不是也可以用同样的代码。另外根据我以前的经验,qq国际版或者TM不能打开本地聊天窗口,只能在网页上聊天。


网上看到了移动端代码,如下:

mqqwpa://im/chat?chat_type=wpa&uin=479858761&version=1&src_type=web

我还没试过是否能正常使用。

在网页上打开qq聊天窗口的代码