聚合物/深/選擇未在移動設備

工作我試圖當設備的屏幕的尺寸調整爲重新安排的佈局，所以我這樣做：聚合物/深/選擇未在移動設備

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

這是工作在臺式機正確，但在移動（ Android手機，平板電腦和iOS模擬器）我得到這個錯誤：

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

任何想法？謝謝！

來源

2014-07-21 Apoth

我通過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>

現在我變「風景」和「肖像」屬性在機身屏幕大小的變化。這適用於所有瀏覽器。

來源

2014-07-28 03:24:34 Apoth

目前有一個open issue支持Shadow DOM填充。它適用於Chrome 35+，因爲它使用原生影子。

來源

2014-07-21 20:24:22 ebidel

謝謝，現在我明白了。但有辦法在不支持的瀏覽器中深入查詢？（感謝這項工作！我在IO14上觀看了你的演示文稿，這一切都很棒:)） – Apoth

隨着平臺版本≥0.4.0，您現在可以毫無畏懼地使用/deep/組合器，它已經被非填充爲非本地瀏覽器。

document.querySelector('html /deep/ [landscape-horizontal]');

來源

2014-07-21 22:44:08

謝謝，現在我明白了。但有辦法在不支持的瀏覽器中深入查詢？ – Apoth

更新了我的答案，現在由聚合物平臺填充。 –

聚合物/深/選擇未在移動設備

回答

相關問題