jQuery mobileにおけるviewport改変

jQMを使ってLibre10向けのmobile頁を作っていて、

どうもviewport タグを設定するとスマホ/タブレットでズームが出来なくなるのが気になって調べてみた。

[html]
<!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.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
[/html]

こちらは公式http://jquerymobile.com/demos/1.2.1/docs/about/getting-started.htmlからの引用このままだとuser-scalable=noになって、ズームできないから変えてみようと言うことで

[html]
<meta name="viewport" content="width=device-width, initial-scale=1">を

<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=5">へと変えてみたわけです。
[/html]

しかし、何も起こらない。

chromeの開発者ツールで見てみると

該当部elementが

[html]
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=5, user-scalable=no, initial-scale=1 ">

になってるんです。
[/html]

どうやらjQuery mobile内で書き換えられてるらしい。

mobileinitで書き換えてみたりしたけれどもうまくいかず、

最終的にviewportの設定をjQuery mobileを読み込んだ後に変更して、うまくいくようになりました。

[html]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

追加→<meta name="viewport" content="width=device-width, initial-scale=1"> ←追加

</head>
<body>
[/html]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です