• 締切済み

スマホページの横幅調整

スマホのHPを作ったのですが、初期表示時、小さく表示されてしまいます。 たて表示をイメージして、横幅320pxの固定サイズで作成したのですが、 ほかになにか記述が必要なのでしょうか? (通常のHTMLとcssで作成しています) お手数ですが、ご存知の方、教えてください。

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

HTMLに <meta name="viewport" content="width=device-width, initial-scale=1.0"> CSSのhtmlに html {-webkit-text-size-adjust: none} でスタイルシートの設定が生きてくるはずです。  ただ、固定サイズはまずいので、リキッドにしてスマホを横にしてもよいようにしておくほうが良いでしょう。

enomotake
質問者

お礼

丁寧にありがとうございます。 助かりました。

関連するQ&A

  • HTML、CSS、スマホの時だけ全画面表示にしたい

    パソコン向けにサイトを作成しまして、横幅800pxと指定しているのですが、スマホで表示すると全画面表示の方が見やすいので、スマホの時だけ全画面表示にできるHTMLかCSSの指定方法はありますか? パソコンで表示させた時は、横幅800pxのままにしたいです。

  • HTMLで横幅をCSSで設定できません。

    HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

    • ベストアンサー
    • HTML
  • ホームページの横幅

    こんにちわ、 今まではホームページを作成するときのサイトの横幅は800pxで作成していたのですが、もう少し大きなサイズで作成したいと思っています。 そこで横幅を大きくするならどれくらいの幅までなら大丈夫でしょうか? それとも横幅は今でも800pxでの作成が望ましいのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • サイト制作において、一般的な横幅を教えてください。

    横幅が固定のレイアウトの場合、「800pxの画面サイズに合わせて、横幅は760pxで作る」というのが一般的だと聞いたのですが、では、「どーーしても1024pxの画面サイズに合わせて作る」には横幅を何pxで作るのが一般的でしょうか。 どなたかご存じの方がいらっしゃいましたら教えて頂きたいです。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • facebookの埋め込みエリアを横幅いっぱいに

    2015年6月23日からFacebookのページプラグインの横幅のマックスが500pxになりました。 それを絡むいっぱい700pxにしたいのですがうまくいきません。 ググるとCSSでできるような記述を見つけたのでやってみましたがうまくいきません。 http://www.seomode.jp/html-css/2014/01/31/2157/ 何か良い方法はないでしょうか。宜しくお願いします

  • セブンイレブンのHPのように印刷時に横幅の自動調整をしたい

    セブンイレブンのホームページのように、 横幅を768pxとっているのにも関わらず、A4縦での印刷時に横幅が切れないようにしたいのですが、どのようにしたらできますか? いろいろ試してみたのですが、横幅が750pxを超えると、切れてしまいます。 ◆セブンイレブンジャパン http://www.sej.co.jp/faq/index.html 環境は、 Windows IE5.5↑ HTML、CSS、Javascriptのみ使用可能。

    • ベストアンサー
    • HTML
  • CSSでwidthの指定は%、pxどっちがいい

    HTML5、CSS3の記述方法で教えていただきたい事がございます。 横幅を指定する場合には、px、%、vwなどどんな単位で記述するのがいいのでしょうか。また、%とpxを混ぜて使ってもいいのでしょうか。高さも%を使うものでしょうか。 お手数ではございますが、それぞれの説明サイトはあるのですが、では実際にどれを使うのが良いかの記述はどこにもなかったので、書き込ませていただきました。 知識をお持ちの方、よろしくお願いいたします。

    • 締切済み
    • CSS
  • 横幅1200pxのHPをセンタリングしたい

    みなさま、お知恵を貸してください。 今HPを作っています。 横幅1200pxで作成いたしまして、 ブラウザ横幅1200px以下で見たときに全体をセンタリングした状態で表示したいのです。 サイト全体の横幅をそもそも変えれば、、というのは時間が限られておりできません。。 CSSやJSでなんとか調整できませんでしょうか。 なお、ブラウザが横幅980px以上では横スクロールを消したいです。 コーディング初心者のためなかなか解決策が見つかりません。。 どうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • ページの高さを取得し、それに合わせて横幅を決めたい

    閲覧ありがとうございます。 現在javascriptの練習をしているのですが、 ブラウザのページの高さを取得し、それに合わせて Webページの横幅を自動算出し、style.widthで割り当てたいのですが、 Firefoxでは構文エラーがでます。 何がいけないのでしょうか。 以下にソースを記述いたしますので、ご教示いただければと思います。 併せて、margin: 0 auto;で中央揃えにしたいのですが、 CSSでは一応記述しておりますが、可能でしょうか。 $(window).resize(function(){ var h = $(window).height(); var w = h * 1.5; var bodyWidth = document.getElementsByTagName('body').tyle.width = w + 'px'; var headerWidth = document.getElementById('hdr').tyle.width = w + 'px'; var contentWidth = document.getElementById('content-box').tyle.width = w + 'px'; var footerWidth = document.getElementsByTagName('footer').tyle.width = w + 'px'; }); 以下HTMLソースコード(必要部分のみ) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="hdr"> <header> </header> </div> <div id="content-box"> </div> <div> <footer> </footer> </div> </body> </html> 以下CSS(必要部分のみ※現在は固定幅にしています。) * { margin: 0; padding: 0; font-style: normal; } body { width: 1024px; margin: 0 auto; position: relative; } div#hdr { position: absolute; top: 580px; left: 0; background: #ffffff; width: 1024px; height: 100px; z-index: 100; } div#content-box { position: relative; position: absolute; top: 20px; left: 0; width: 1024px; height: 560px; overflow: hidden; } div#ftr { position: absolute; width: 1024px; height: 20px; top: 0; left: 0; }

  • ホームページの横幅が広くて、印刷すると切れてしまう。

    会社のホームページを作っていて、横幅の設定について質問させて下さい。 横幅720pxで作成していたのですが、印刷する時に切れないように横幅を短くして欲しいと言われました。windowsのIEから印刷しようとすると、右側が切れてしまいます。印刷の設定を変えればよいのですが、その設定をしていない(分からない)人も多いようです。 大企業のHPを見てみると横幅700~780pxが多いので、これが主流だと思っていたのですが、やはり右側が切れずに印刷できるように横幅短め(600px以下?)で、ホームページを作成した方がよいでしょうか? 私としては印刷幅に合わせると横幅がかなり狭くなるように思うので、モニタ表示を優先して作成したいのですが・・・ みなさんはどうしていますか?ご意見伺えたらと思います。