userAgentでのipad判定

Question

WordPressにて一からホームページを作成しており

レスポンシブ用にmetaタグ内を下記コードにしております。

php
<meta name="viewport" content="width=440" id="meta-viewport">

ipadの場合表記がぶさいくになるので以下の
jsコードでipadの際はコンテンツ幅を変えようとしました。
(1280にしてるのはpc版のデザインがコンテンツ幅1280で設計されているからです。)

js
let userAgent = window.navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('ipad') != -1) {
  jQuery("#meta-viewport").attr("content" ,"width=1280");
  }

ipadで表示を確認してところ
chromeでは幅1280で表示されるのですが
safariとFirefoxでは440のままになっております。

ちなみにpcのsafari,Firefoxの
検証ツールでipadの画面にした場合はきちんと幅1280になりました。

safari,Firefoxはいずれも
最新版を使用しております。

ipadOSも最新の14.3です。

スーパーリロードもしておりますので
キャッシュでもないと思います、、

対策あれば教えていただきたいです。
よろしくお願いします。

Comments

[m.ts10806]

元々どのようにレスポンシブ対応されてたのでしょうか。metaだけで対応できるとは思えませんが

[deresuke]

m.ts10806様

@media(min-width:767px){
}
として、スマホ用のcssを入力していました!
スマホの際は問題なく表示されております。