meta viewport を動的に切り替える際に気をつけること

pushstate 使用時など、jQuery などで meta viewport を書き換える場合、content 内の要素数が一致していないと、書き換え前の要素が引きずられてしまうので、一致させる必要があります。

一致してない例

$("meta[name='viewport']").attr('content',
  page == 'A'
    ? 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
    : 'width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes'
);

これだと、一度ページ A ときはピンチアウトできませんが、その後ページ A 以外に移ったときに、「maximum-scale=1.0」が残ってしまい、結果「minimum-scale=1.0, maximum-scale=1.0」と解釈され、やはりピンチアウトできなくなります。

一致させて、いらないものは省きましょう。

$("meta[name='viewport']").attr('content',
  page == 'A'
    ? 'width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no'
    : 'width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes'
);