現在、サイトの幅が640pxの指定がしてあります。
具体的には、CSSにmin-width640pxの指定が行われており、vewportには
<meta name="viewport" content="width=device-width, initial-scale=1">
と設定されています。
これらのサイトをスマホなど640px以下のデバイスで見るときにも、画面幅ぴったりに見れるようにしたいのですが、これはどの部分の定義を変更または追加することで実現できますでしょうか?
現在は一応手動で画面を縮小させると、画面幅ぴったりになるのですが、ページを更新したり、別ページへ遷移してしまうと、また640px幅で表示され、再度手動で縮小する必要があります。
この辺りを手動で調整しなくてもぴったりくるようにしたいです。
お詳しい方、アドバイスをよろしくお願いいたします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
CSSをレスポンシブ対応にする。
現在のCSSを見て見ないと何とも言えないが、概略は以下。
htmlの<meta name="viewport"は全ページに入れる。
cssは
min-width640px指定を止める。
CSSで横幅指定している部分は幅を%で指定する。
親要素に対する%、親要素が無い場合はブラウザの幅に対する%が適用される。
詳しいレスポンシブデザインのやり方は「レスポンシブ」で検索して下さい。
ありがとうございます。
説明不足ですみません、一応現在はレスポンシブで対応しています。
ただ、リキッドレイアウトではないため640pxを基本値として作成していますが、640px以下で閲覧した場合に、全体的には640pxの構成を保ちつつ、480pxなどの小さい画面サイズに縮小?されてぴったりと表示させたいのです。
例えば、yahooとかのサイトPC版をスマホで見ると全体が縮小されて綺麗に表示されていますので、このイメージです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- デスクトップパソコン PC作成のスマート対応フアイルへの転換 1 2022/06/18 19:50
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
ウィンドウを狭めても中の表示...
-
iPhone用のサイトの文字がずれ...
-
スマホで画面ぴったりに表示さ...
-
macとwindowsのレイアウト崩れ...
-
aタグに直接style=""で:hoverを...
-
Firefox 横スクロールバーを表...
-
なぜ左に寄っているの?
-
css。横並びBOXに長文textを流...
-
コードを書いて下さい( ; ; )...
-
インラインフレームの表示位置...
-
H1 タグの行間
-
IE6でCSSの一部の記述をを読み...
-
text-alignの解除の方法
-
端から端まで横線を引きたい
-
テキストボックスの文字を右揃...
-
INPUT TEXT内の文字位置を指定...
-
CSSの設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
コードを書いて下さい( ; ; )...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
アップロードするサーバーによ...
-
端から端まで横線を引きたい
-
macとwindowsのレイアウト崩れ...
-
Formタグのブロックの高さについて
-
chromeだけbody直下に空白が開く
-
FireFoxで見るとブラウザの幅に...
-
CSSでh1とその下の文字との行間...
-
IE8ではtext-align: center;で...
-
css。横並びBOXに長文textを流...
-
text-alignの解除の方法
-
div align="center"のalignは旧...
-
<legend>で表示されるタイトル...
おすすめ情報
initial-scale=1を外したら、自動で縮小表示されました。
一度試していたのですが、キャッシュが残っていたのでしょうか?効果が確認できなかったので…。
現在は、ページ遷移してもぴったりと表示されています。
お騒がせして申し訳ありません。ありがとうございました。