我正在我的移动设备(htc one)上远程调试Chrome中的移动网站,通过USB连接到我的Mac.一切正常,除了我在桌面浏览器中每隔~30秒收到一个错误:
Detached from the target
Remote debugging has been terminated with reason: websocket_closed
Please re-attch to the new target.
如果我然后使用adb设备检查连接的设备,则没有.所以我拔下我的设备,等待几秒钟,再次使用adb forward tcp重新连接:9222 localabstract:chrome_devtools_remote并且everthing工作正常 - 直到出现相同的错误.
有谁知道我怎么能假装这个错误？
我正在进行两列布局.两列都将显示iframe,两者的宽度将定义为CMS中的内联样式/设置.如果iframe小于列,则应垂直居中.如果它比柱大,它应缩小到柱的最大宽度,这几乎是50%宽.
(是的,这可能在不使用flexbox两次的情况下完成.但我对这些答案不感兴趣,因为我简化了示例和用例.)
示例:http: //jsbin.com/logifu/2/
HTML:
<div class="content">
<div class="col">
<div class="media-wrapper">
<iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width: 2000px; height: 2000px"></iframe>
</div>
</div>
<div class="col">
<div class="media-wrapper">
<iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width:200px"></iframe>
</div>
</div>
</div>
SCSS:
.content {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col {
display: flex;
justify-content: center;
align-items: flex-start;
flex: 1;
height: 100%;
min-width: 0; // this fixes the issue in FF 34
+ .col {
margin-left: 40px;
}
}
.media-wrapper {
box-sizing: border-box; …如果您切换放置在上方的元素的高度,则触摸设备上有关于链接的可点击区域的奇怪行为.如果您运行以下代码段(例如,将其保存在本地并使用chrome来模拟触摸事件),您会注意到#mylink在某些情况下您没有点击红色链接区域的哈希值会被添加到网址中.有时你点击红色区域,它不会被添加.
例如
#mylink则会将其添加到URL中,就像您单击红色链接区域一样.=>为什么？#mylink则不会添加到URL.=>为什么？#mylink则不会添加到URL.=>为什么？<html>
<head>
<style type="text/css">
.test {
background: grey;
height: 200px;
}
.test.is-visible {
height: 400px;
}
.link {
height: 600px;
display: block;
background: red;
}
</style>
<script type="text/javascript">
(function() {
window.addEventListener( 'touchstart' , function() {
document.getElementsByClassName("test")[0].classList.toggle('is-visible');
});
})();
</script>
</head>
<body>
<div class="test">
Click the grey area. Element enhances and minimizes itself. Now click on the lower half of the enhanced grey area (if …我正在将* .webm视频与alpha透明度集成在一起。目前，仅Chrome和Opera支持透明度。（示例：http : //simpl.info/videoalpha/）例如Firefox播放视频，因为它支持WebM格式，但是背景不是黑色而是透明。
我的计划是，如果浏览器不支持Alpha透明度，则显示视频海报图像而不是视频。因此，只有在浏览器支持WebM alpha透明度的情况下，才应播放视频。我知道如何检测浏览器或渲染引擎并因此播放视频（请参见下面的代码）-但是有“特征检测”方法吗？
var supportsAlphaVideo = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) || (/OPR/.test (navigator.userAgent));
if (supportsAlphaVideo) {
document.querySelector(".js-video").play();
}
另请参见http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
javascript ×2
css ×1
css3 ×1
flexbox ×1
html ×1
html5-video ×1
touch ×1
touch-event ×1
webm ×1