質問編集履歴

4 追記3:解決したコードを書いておきます

teruri

teruri score 206

2018/06/14 23:00  投稿

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

    26538 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15860 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    10779 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    404 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • iPhone

    1379 questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

3 追記2:出力が期待通りである点を追記

teruri

teruri score 206

2018/06/14 13:41  投稿

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

    26538 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15860 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    10779 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    404 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • iPhone

    1379 questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

2 スクショを追加しました。

teruri

teruri score 206

2018/06/14 11:39  投稿

iPhoneの横向きモードのときの、viewportの設定が、うまくいかなくて困ってます。
#前提
レスポンシブで、サイトを作っているのですが、viewportの設定のせいか、望み通りの表示になりません。
#実現したいこと
通常のスマホ縦向きと、PCとで分けて作っていたのですが、
急遽スマホ横向きを表示しなくてはならなくなりました。
#不具合、困りごと
スマホ横向きのときに下記のように1200pxに合わせて表示してくれたらいいのに、
アクセスすると、拡大した状態になってしまいます。
 
(追記)  
求める画面  
![求める画面](7982a8400c76b4321a809579d82c0e3a.png)  
 
実際の画面  
![実際の画面](20004d1fc34db465fc5f7da425d8bf52.png)  
 
このように、拡大された状態になってしまいます。  
(/追記)  
 
なんででしょう?
#いまのコード
JavaScriptで場合分けをすればいいのかなと思って、
以下のように書きました。
```js
     if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {//スマホのとき
       if (window.innerHeight > window.innerWidth){//縦向き(ポートレートのとき)
         document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
       } else {//横向きのとき
         document.write('<meta name="viewport" content="1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
         document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
       }
     }else{//スマホじゃないとき
       document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
     }
```
こんなのも試してみました。
```js
       } else {//横向きのとき
         document.write('<meta name="viewport" content="1200, initial-scale=1.0, maximum-scale=1.0">');
         document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0">');
```
 
※content=1200っていうのは間違いだったようで、content=width=1200に修正しました(画面には変化なし)  
 
maximum-scale=1.0
のところをいろいろ変えてみてもうまくいかない・・・。
のところをいろいろ変えてみてもうまくいかない・・・。(画面には特に変化なし)
あと
initial-scale=1200
ってのも試してみたけど、違うみたい・・・。
こんな感じ。  
![initial-scale=1200の状態](4e42c6f62ba8b1eaa4d2a48fdb6a5dc6.png)  
 
ちなみに、PCではこのように見えています。  
![PCの画面](0544bc9507f4872df434880454810ada.png)  
 
(上記画像2点追記)  
#環境
Chromeのバージョンは最新です。
OSはWindows10で見てます。
スマホはiPhone7やiPhoneXでチェックしております。
こんな感じです!!! すみません、ヘルプミー!!!
  • JavaScript

    26538 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15860 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    10779 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    404 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • iPhone

    1379 questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

1 initial-scale=1200を試したことを追記

teruri

teruri score 206

2018/06/14 03:26  投稿

iPhoneの横向きモードのときの、viewportの設定が、うまくいかなくて困ってます。
#前提
レスポンシブで、サイトを作っているのですが、viewportの設定のせいか、望み通りの表示になりません。
#実現したいこと
通常のスマホ縦向きと、PCとで分けて作っていたのですが、
急遽スマホ横向きを表示しなくてはならなくなりました。
#不具合、困りごと
スマホ横向きのときに下記のように1200pxに合わせて表示してくれたらいいのに、
アクセスすると、拡大した状態になってしまいます。
なんででしょう?
#いまのコード
JavaScriptで場合分けをすればいいのかなと思って、
以下のように書きました。
```js
     if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {//スマホのとき
       if (window.innerHeight > window.innerWidth){//縦向き(ポートレートのとき)
         document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
       } else {//横向きのとき
         document.write('<meta name="viewport" content="1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
       }
     }else{//スマホじゃないとき
       document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
     }
```
こんなのも試してみました。
```js
       } else {//横向きのとき
         document.write('<meta name="viewport" content="1200, initial-scale=1.0, maximum-scale=1.0">');
```
maximum-scale=1.0
のところをいろいろ変えてみてもうまくいかない・・・。
あと  
initial-scale=1200  
ってのも試してみたけど、違うみたい・・・。  
 
#環境
Chromeのバージョンは最新です。
OSはWindows10で見てます。
スマホはiPhone7やiPhoneXでチェックしております。
こんな感じです!!! すみません、ヘルプミー!!!
  • JavaScript

    26538 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15860 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    10779 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    404 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

  • iPhone

    1379 questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る