iPhone8
パソコンのブラウザーで下のコードを読むと、ブラウザーの横幅に合わせて、640px以下なら、フォントサイズが変わります(大きくなります)。
しかし、iPhoneで閲覧すると、文字が小さい(メディアクエリーが適用されない)です。コードが間違っているでしょうか。
教えてください。お願いします。(初心者のおかしな質問だと思いますが、お許しください)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>メディアクエリーテスト</title>
<style>
@media screen and (max-width:640px) {
.text {
font-size:32px;
}
a {
font-size:18px;
}
}
</style>
</head>
<body>
<center>
<p class="text">
テキストテキストテキストテキストテキストテキストテキスト
</p>
<hr/>
<a href="#"><リンクテキスト></a>
</center>
<hr/>
</body>
</html>
No.1ベストアンサー
- 回答日時:
こんばんは
<head>内に以下を追記してもだめでしょうか?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
fujillinさん、ご回答ありがとうございます。
解決しました! スマホには viewport という設定が必要なのですね。エディターで作っているだけでは、全く意識しないのでわかりませんでした。
とても勉強になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- ASP・SaaS FC2 BLOG <AUDIO TAGを入れプレビューはOk テーンプレートを更新すると ✖ 1 2023/08/14 11:40
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML上に貼り付けたPDFが表示さ...
-
css ,videotタグ。ホームページ...
-
HTMLファイルのインクルードで...
-
Javascriptでランダムパラメータ
-
body内にmetaタグを記述は問題...
-
HTMLソースにない文字がブラウ...
-
SVGをobjectタグで埋め込み・表...
-
POSTしたデータの文字コードがu...
-
WebのPythonでの値の受け渡し
-
textareaの一行の文字数制御
-
HPの背景画像を動かさずスク...
-
safariだけcssが反映されない
-
文字化けを故意に表示したい
-
FFFTPでの文字化け
-
検索エンジンに引っかからない...
-
文字コードをutf-8で保存したい
-
Aタグのmailtoでメッセージ作成...
-
カラーラインの中に文字
-
<body>内に<head>を入れ子にで...
-
TEXTAREAのスクロールバーを消...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
携帯とPCの自動判別
-
body内にmetaタグを記述は問題...
-
HTMLファイルのインクルードで...
-
HTML上に貼り付けたPDFが表示さ...
-
HTMLでwebサイトを作ってるので...
-
iframe内の表示を常に最新にしたい
-
ページ全体を中央に配置したい...
-
WEBページがIEだけ文字化けして...
-
根号の書き方について
-
リンクボタンにgifアニメを使え...
-
textareaの一行の文字数制御
-
文字化けを故意に表示したい
-
borderでa:hover下線表示させる...
-
IEのみ文字化け
-
safariだけcssが反映されない
-
Javascriptでランダムパラメータ
-
表示時に1回だけリロードさせ...
-
なぜ height 100% がつくのか ...
おすすめ情報