小编Piw*_*aka的帖子

在Chrome中的Javascript中使用Android共享意图?

我想从Chrome for Android中的Javascript调出Android Share菜单.我知道您可以从Chrome启动特定应用:https: //developers.google.com/chrome/mobile/docs/intents

有没有办法使用href ="intent:// ..."打开共享菜单?这是在应用程序中完成的:http://developer.android.com/training/sharing/shareaction.html

javascript android google-chrome android-intent

10
推荐指数
1
解决办法
4282
查看次数

将SVG元素保留在精确像素上

我有一个SVG元素,它将项目绘制为精确的像素.当元素本身放置在DOM中的精确像素上时,它在所有主要浏览器中呈现没有别名.但是,当元素的祖先中存在任何子像素偏移时,它将变为别名.

我可以通过将形状渲染设置为清晰边缘或优化速度来防止大多数浏览器中的混叠,但是如果SVG的内容在错误的方向上旋转,则可能会使SVG的内容错位1个像素,因此可能会错过像素行图像的顶部或侧面.

我可以使用el.getBoundingClientRect()修改问题并调整边距以消除子像素偏移.这工作一次,但如果元素在dom中移动 - 通过滚动,拖动等等,则必须重新应用该方法.这意味着要听DOM,这看起来效率不高.

我想要找到的是一个CSS规则,或者我可以包装SVG以强制它定位在精确像素的元素.我想知道是否存在一些原生元素 - 例如,浏览器可能强制在精确像素上渲染以用于其自身渲染目的的复选框.然后我可以调整SVG相对于...

http://codepen.io/anon/pen/HvCcK(问题最好在Firefox中演示)

HTML:

Crisp on FF and Chrome/Safari:<br/>
<div id="s2" style="width:21px; height:7px; background-color:#FFFFFF;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewBox="0 0 50 70" preserveAspectRatio="xMinYMin" style="display: block;"><defs></defs><g style="display: block;">
    <rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect>
    <path d="M10 10 L 40 10  40 20  20 20  20 30  40 30  40 60  10 60  10 50  30 50  30 40  10 40 Z" fill="white" stroke="none"></path>
    </g></svg>
</div>

<br/>


<div class='offpixel'>
Blurry on Firefox …
Run Code Online (Sandbox Code Playgroud)

html css svg

7
推荐指数
2
解决办法
2901
查看次数

iOS Safari 输入类型文本在元素大小调整后部分失去焦点

我有一个输入元素 type='text',它在 iOS Safari 中进入错误状态,这样输入元素就会出现焦点并分派 keyup 事件,但不会更新字段的值;用户键入时看不到新字符。在我正在构建的网站中,我在调整焦点文本输入元素的大小***后触发此状态。我制作了一个 jsfiddle 可以可靠地重现该错误:

<input id='ipt' type='text' style='width:250px;height40px;'/> 

<script>
  var ipt = document.getElementById('ipt');
  ipt.addEventListener("keyup", onkeyup, false);
  function onkeyup(e){
    ipt.style.width = '100px';  
    ipt.removeEventListener("keyup", onkeyup, false);
  }
</script>
Run Code Online (Sandbox Code Playgroud)

重现该错误:

  1. 在 iOS Safari 中打开http://jsfiddle.net/55dth/embedded/result
  2. 通过点击聚焦输入元素
  3. 捏缩放以显示输入的完整宽度(需要触发错误)
  4. 输入一些东西

我想了解为什么它会进入这种有缺陷的状态,以及我如何才能避免它。它很可能涉及 iframe 和文档设置。我必须在 iframe 中,并且需要更改文本字段的宽度。

或者说如何摆脱这种状态。我可以通过侦听 keyup 并检查插入点处的值与事件中的键值进行比较来检测我是否处于该状态。我尝试切换只读、重置值、焦点()、切换输入模式...


** 我想调整元素的大小 - 以便在键盘打开时有更多的水平空间可以打字。

*我很确定进入这种状态还需要其他条件,但是我不确定确切的条件。

html javascript input mobile-safari

5
推荐指数
0
解决办法
1384
查看次数

修复了移动设备上缩放浏览器窗口上的 div 位置

在桌面浏览器中缩放 HTML 页面时,固定位置 div 将像页面的其余部分一样缩放,并保持其相对于视口的位置固定。Chrome 移动浏览器上也曾经出现过这种情况(在版本 39 中仍然如此),但在移动版 Chrome 40 上,它开始表现得与移动版 Safari 类似,并且当页面缩放时,固定元素将固定为缩放后的尺寸。如果页面处于 100% 缩放(有一些注意事项),它们将位于文档的位置。

这是一个 div 位置为固定的页面:固定 http://betterstatistics.org/tests/fixedpos

对于移动设备,我根据缩放比例缩放 div,并保留position:fixed 属性,这样我就不必在滚动时重新定位它,我想根据缩放设置位置。

这是我的尝试: http://betterstatistics.org/tests/fixedpos/attempt001.html(仅适用于移动设备)

相关行:

orig_w = 300;
orig_h = 100;
document.body.addEventListener('touchend', repositionDiv);

function repositionDiv(){
  var zoom = getZoom();
  var d1 = document.getElementById("div_br");
  var w = (orig_w / zoom);
  var h = (orig_h / zoom);
  d1.style.width = w + 'px';
  d1.style.height = h + 'px';
  d1.style.left = (window.scrollX + window.innerWidth - d1.offsetWidth) +'px';
  d1.style.top = (window.innerHeight - d1.offsetHeight) +'px'; …
Run Code Online (Sandbox Code Playgroud)

javascript css css-position chrome-for-android

5
推荐指数
1
解决办法
2405
查看次数