2012-12-04 47 views
2

我有一個網站的移動版本,它使用CSS媒體查詢來確定方向。使用Apple Smart App Banner時,移動網站總是呈現爲風景 - jQuery Mobile

佈局根據橫向/縱向更改並相應地調整寬度。

最近,伴侶原生移動應用程序已發佈在蘋果應用程序商店 - 我實現了Apple Smart App Banner。

問題是,顯示智能橫幅時 - 呈現的佈局是橫向版本的佈局 - 無論實際方向如何。

這是一個問題,因爲在肖像中一切看起來很時髦。

我無法找到解決方法或發生了什麼事情。

爲了提供更多的上下文 - 這是一個Rails項目 - 移動網站使用jQuery Mobile構建。

有沒有其他人經歷過這個或知道解決方案?

+0

具體的代碼會有所幫助。 – Jasper

+0

我甚至不確定我會在這裏提供什麼,因爲它不是來自網站的特定片段。 我想添加上下文 - 它似乎會影響'ui-content'容器內的內容。該網站的標題似乎呈現正確。 – danstever

+0

我真的只是指的是在文檔的頭部添加此: '' ,然後使用媒體查詢中我的CSS是這樣的: '@media只有屏幕和(方向:縱向){ \t#一些內容 \t \t \t {寬度:350像素; }} @media只有屏幕和(取向:橫向){ \t#一些內容 \t \t \t {寬度:450像素; } \t \t \t \t \t }' – danstever

回答

1

我相信這是一個錯誤。如果可用寬度大於可用高度,我懷疑iOS會設置「橫向」標誌。在3.5「iPhone上顯示智能應用程序橫幅時,情況就是這樣,在4」iPhone上則不是。這就是爲什麼你只在舊iPhone上看到這個問題。

我找到了一個解決辦法哈克用max-aspect-ratio

<link rel="stylesheet" href="/css/portrait.css" media="all and (max-aspect-ratio: 4/3)"> 
<link rel="stylesheet" href="/css/landscape.css" media="all and (orientation:landscape) and (min-width: 480px)">