-
ID:ObDwp. さんの質問

ホームページをスマホで表示すると、ページがドアップで表示されてしまいます。

サイトのURLは、こちらです。
http://juku-pegasus-jichiidai.com/index.html

ビューポートを設定しているのですが、スマホ用のCSSをよくわからずに制作したせいか、

スマホで表示した際、最初にページがドアップで表示されます。

スマホのCSSは、以下のような感じです。。
http://juku-pegasus-jichiidai.com/smart.css

CSSの問題で、スマホ(アンドロイド)で見た際、ページがドアップになってしまうのでしょうか。

一応、指で縮小すれば見れるようになるのですが、
グーグルのモバイルフレンドリーで、「コンテンツの幅が画面の幅を超えています」という警告が出ます。

なんとか、スマホ(アンドロイド)でサイトを見た際、初めから画面ぴったりにサイトを表示できるようにしたいのですが、
どうすれば良いのでしょうか。

どなたか、道しるべをいただけましたら本当に幸いでございます。

どなたか、助けていただけないでしょうか。

何卒宜しくお願い申し上げます。。

みんなの回答 3 件

ID:9F2rIk さんの回答

  • viewportがダブってるので1つ削除
  • widthの値をdevice-widthでなく固定にしてみる(1000?)
    .
    関係ないけど
  • tableをレイアウトに使うのはやめよう
  • エラーが出てる。(xxxの部分はurl)
    Resource interpreted as Stylesheet but transferred with MIME type application/x-javascript: "xxx/smartRollover.js".

ID:ObDwp.

質問を投稿した者です。
ご丁寧なご回答に、心よりお礼申し上げます。

widthの値をdevice-widthでなく固定(1000px)にしたところ、
「コンテンツの幅が画面の幅を超えています」

という警告は消えたのですが、
今度は、代わりに、
「モバイル用 viewport が設定されていません」

という警告が出るようになってしまいました。

どうにか、スマホ用のCSS「smart.css」を編集することで問題を解決できればと試行錯誤しているのですが、
問題が自力では解決できず、本当に涙が出そうです。

それでも、お答えいただいた暖かさにもまた、感動しております。
ありがとうございます。

ID:ObDwp.

スマホ用のCSSの記述の仕方で、何かうまい方法がございましたら、どうか、ご指導ご鞭撻いただけましたら幸いです。

何卒、何卒宜しくお願い申し上げます。

ID:k3vFqa

viewportをスマホの時だけjsで書き換えたらだめですかね?

ID:AFLuJ9 さんの回答

smart.cssに書かれてる#hpb-containerのwidthをautoにして細部を細かく調整

ID:pqItLB さんの回答

tableでレイアウトしなければならない理由ってあるんですかね?
tableを使わなければたぶんそれほど難しい問題は発生しませんよ。
当たり前ですけど、新しいものに対応したいのであれば、あなたの知識を新しくしてください。特にHTML/CSS関連で、5年以上前に仕入れたような知識は一度全部入れ替えた方がいいですよ。

ID:Oh0172

きっとホームページビルダー使ってるからテーブルレイアウトなんでしょ?

ID:8nW/uI

雑魚が雑魚にアドバイス!

最終更新日:2015-02-13 (4,079 views)

関連するトピックス

ページ上部に戻る