#前提
レスポンシブで、サイトを作っているのですが、viewportの設定のせいか、望み通りの表示になりません。
#実現したいこと
通常のスマホ縦向きと、PCとで分けて作っていたのですが、
急遽スマホ横向きを表示しなくてはならなくなりました。
#不具合、困りごと
スマホ横向きのときに下記のように1200pxに合わせて表示してくれたらいいのに、
アクセスすると、拡大した状態になってしまいます。
このように、拡大された状態になってしまいます。
(/追記)
なんででしょう?
#いまのコード
JavaScriptで場合分けをすればいいのかなと思って、
以下のように書きました。
(追記2)
javascriptはhtmlにインラインで記載していまして、htmlのheadの中に記載しており、出力している箇所は期待通りの出力ができているはずです。
下記のコードにconsole.log()で出力の検証をしたときの箇所について追記しておきます。
(/追記2)
js
1 if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {//スマホのとき 2 if (window.innerHeight > window.innerWidth){//縦向き(ポートレートのとき) 3 document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">'); 4 console.log("縦向き"); 5 } else {//横向きのとき 6 document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">'); 7 console.log("横向き"); 8 } 9 }else{//スマホじゃないとき 10 document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">'); 11 console.log("スマホじゃないとき"); 12 } 13
こんなのも試してみました。
js
1 } else {//横向きのとき 2 document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0">'); 3
※content=1200っていうのは間違いだったようで、content=width=1200に修正しました(画面には変化なし)
maximum-scale=1.0
のところをいろいろ変えてみてもうまくいかない・・・。(画面には特に変化なし)
あと
initial-scale=1200
ってのも試してみたけど、違うみたい・・・。
こんな感じ。
(上記画像2点追記)
#環境
Chromeのバージョンは最新です。
OSはWindows10で見てます。
スマホはiPhone7やiPhoneXでチェックしております。
こんな感じです!!! すみません、ヘルプミー!!!
(追記3)
コメントに書いたコードをこっちにも貼っておきます
js
1 var isSP = (window.navigator.userAgent.indexOf('iPhone') > 0) || (window.navigator.userAgent.indexOf('iPod') > 0) || (window.navigator.userAgent.indexOf('Android') > 0); 2 var isTate = (window.innerHeight > window.innerWidth); 3 if (isSP) {//スマホのとき 4 if (isTate){//縦向き(ポートレートのとき) 5 document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">'); 6 console.log("縦向き"); 7 } else {//横向きのとき 8 document.write('<meta name="viewport" content="width=1200, user-scalable=yes">'); 9 console.log("横向き"); 10 } 11 }else{//スマホじゃないとき 12 document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">'); 13 console.log("スマホじゃないとき"); 14 } 15
回答1件
あなたの回答
tips
プレビュー