質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

CSS

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

Q&A

解決済

1回答

2251閲覧

モバイルフレンドリーテストのスクリーンショットについて

退会済みユーザー

退会済みユーザー

総合スコア0

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

CSS

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

0グッド

0クリップ

投稿2018/09/05 01:21

googleのモバイルフレンドリーテストについて質問です。

https://search.google.com/test/mobile-friendly?hl=ja

上記のサイトでチェックしたところ、モバイルフレンドリーになっているんですが、スクリーンショットが実際の画面と違うものになっています。
どう違うかというと、レイアウト上部にあるグローバルメニューの縦幅が画面の高さまで引き延ばされてしまっています。

ページの構造は、AMP対応のHTML5+CSSで制作したページで、画像は使っていますがフォームなどもなく比較的シンプルなページです。
HTML文法チェックやAMPテストはパスおり、ソース上の記述ミスの可能性低いと思います。

ご存知の方、原因を教えてください。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

liveasnotes

2018/09/05 01:55 編集

実装の違いによる「バグ」を除き,コードで書いたとおりの表示となっているはずです.記述ミスでなくても「作った側の予想」に反する結果となることはよくあります.単に文法上問題ないというだけで,スタイリング等に問題がないことは証明できません.(参考:「ワードサラダ」https://ja.wikipedia.org/wiki/%E3%83%AF%E3%83%BC%E3%83%89%E3%82%B5%E3%83%A9%E3%83%80)可能性が低いと言える根拠となった検証過程を示してください.また,ソースコードの提示も必要です.すでに公開しているページなら,ネット上で検索して表示させた場合とモバイルフレンドリーテストで見た場合のスクショを載せ,比較したり,開発者ツールでの表示を示すなどもすれば,さらに原因を探りやすくなります また,コードを掲載する際は,コードを各言語ごとにコードブロックで囲み,言語名を付け,プレビュー画面でシンタックスハイライトとインデントがきちんと効いていることを確認してください. 掲載するコードは,必要最低限かつ状況を再現可能なものにしてください
liveasnotes

2018/09/05 03:50

タイトルは対象が明確になるように書くと良いです(例:「ヘッダー部分が画面いっぱいに広がってしまう」など)
guest

回答1

0

ベストアンサー

事情によりソースやURLは載せられませんが、解決しました。

CSSでグローバルメニューを固定(position:fixed)にし高さを指定しなかったのがダメだったようです。
heightを追加したところあっさり解決しました。
ちなみにモバイルフレンドリーテストとPageSpeed Insights以外ではこのような表示を確認できず、PC(Chrome,FireFox,IE)でもスマホ(iPhone Safari,Android ブラウザ,Chrome)でも予想通りの表示できていました。

やはりソースを晒さなければ解決できない内容でした。

投稿2018/09/05 03:03

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問