Android 2.x 使用 jQuery Mobile 設定 Position:fixed , Select 會無法正常顯示

在 jQuery Mobile 中可以設定 Header 跟 Footer 為 Fixed(這邊有官方文件),不過為了要能夠支援多種裝置效果,這邊的 Fixed 是用 javascript 去控制高度,而不是用 CSS 的 Position:fixed 。下面是有支援 Position:fixed 的裝置對應表。
image
(資料來源)
在 Android 2.x 的版本下,Position:fixed 必須配合 ViewPort  的設定 user-scalable = 0 的情況下才能作用。但是當 Andriod 2.x 的 Position:fixed 作用時,jQuery Mobile 的下拉選單會沒有辦法在 Android 裝置上展開。

重現這個問題

首先到 jQuery Mobile 官網複製官方建議的基本架構

<!DOCTYPE html> 
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->

<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

加入測試的 Select 下拉選單

<div data-role="content">
<p>Hello world</p>
<select>
<option>Google</option>
<option>Yahoo</option>
<option>Bing</option>
</select>
</div>

加入 Position: Fixed

<div data-role="header" style="position: fixed; width: 100%;">
<h1>My Title</h1>
</div>

加入為了在 Andriod 2.x 能夠啟用 Position: Fixed 效果必須的 user-scalable=0

<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1">

使用模擬器顯示畫面

image

接下來點下下拉選單。

image

沒有看錯,除了在邊邊出現藍色邊框證明有點過之外其他什麼事情都沒有發生。

正常情況下應該是會出現下方這張圖片的樣子。

image

要回復正常彈出下拉選單,只要將 position: fixed; 或是 user-scalable=0 移除就可以了。這是因為只要將 user-scalable=0 移除,position: fixed; 就沒有作用了(測試版本是 Android 2.3.1 Flayer)。 順便一提,這兩個版本在 IOS4 ,IOS5 ,Windows Phone7 下都是沒有問題的,IOS4, Windows Phone7 完全不支援 position: fixed;,而 IOS5 則是完全支援。

Demo

下拉選單不正常彈出

image

下拉選單正常彈出

image


Native select Menu no event on Adroid 2.2 or above

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *