聚合物/深/选择器在移动设备中不工作 [英] polymer /deep/ selector is not working in mobile devices

问题描述

 如果（screenOrientation == SCREEN_ORIENTATION_LANDSCAPE），我尝试重新排列设备屏幕调整大小时的布局。 {
 document.querySelector（html / deep / [landscape-horizo​​ntal]）。removeAttribute（'vertical'）; 
 document.querySelector（html / deep / [landscape-horizo​​ntal]）setAttribute（'horizo​​ntal'，''） 
} 
  

这是在桌面机正确工作，但在移动，平板电脑和iOS模拟器）我得到这个错误：

 未捕获的语法错误：无法执行'webkitMatchesSelector' 'html / deep / [landscape-horizo​​ntal]'不是有效的选择器。，source：bower_components / platform / platform.js（0）
  

任何想法？
谢谢！

解决方案

我通过CSS解决了这个问题：

 < style shim-shadowdom> 
 
 body [portrait] / deep / [layout] [horizo​​ntal] [landscape]，body [landscape] / deep / [layout] [horizo​​ntal] [portrait] {
 -ms-flex -direction：column; 
 -webkit-flex-direction：column; 
 flex-direction：column; 
} 
 
 body [portrait] / deep / [layout] [vertical] [landscape]，body [landscape] / deep / [layout] b -ms-flex-direction：row; 
 -webkit-flex-direction：row; 
 flex-direction：row; 
} 
 
< / style> 
  

现在我改变了横向和纵向属性。这在所有浏览器中都有效。

I trying to rearrange layouts when device screen is resized, so i do this:

if(screenOrientation == SCREEN_ORIENTATION_LANDSCAPE) {
        document.querySelector("html /deep/ [landscape-horizontal]").removeAttribute('vertical');
        document.querySelector("html /deep/ [landscape-horizontal]").setAttribute('horizontal', '');
}

This is working in the desktop machine correctly, but in mobile (both android phone, tablet and iOS simulator) i got this error:

"Uncaught SyntaxError: Failed to execute 'webkitMatchesSelector' on 'Element': 'html /deep/ [landscape-horizontal]' is not a valid selector.", source: bower_components/platform/platform.js (0)

Any ideas? Thanks!

解决方案

I solved this problem via CSS:

<style shim-shadowdom>

body[portrait] /deep/ [layout][horizontal][landscape], body[landscape] /deep/ [layout][horizontal][portrait] {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

body[portrait] /deep/ [layout][vertical][landscape], body[landscape] /deep/ [layout][vertical][portrait] {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

</style>

Now i change "landscape" and "portrait" attributes in body on screen size changes. This is working in all browsers.

这篇关于聚合物/深/选择器在移动设备中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！