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]