Q&A
header.txt上の「サブタイトル」や「説明」と書かれている部分も共通ですか？この部分のテキストの量（行数）などがページによって変わったりはしていませんか？
背景をfixedで固定しているはずなのに、ページによってズームしている？のを直したい
PHPでヘッダーファイルとフッターファイルを最初と最後にそれぞれ呼び出し、各ページ(TOPページや会社概要ページなど)の本文をそれぞれの本文に書いて構成しています。(index.php、gaiyou.phpなど)
ですが、全く同じ内容なのに、ページによってヘッダー部分の背景が拡大？されていたり、見えている背景が違います。
PCで見た場合はどのページも同じように見えるのですが、
スマホ(iPhone6やx)で見ると、このような状況になるページとならないページがあります。
なるページはいつ見てもなり、ならないページはいつ見てもなりません。
全てのページは、テキスト主体で特別な事もしておりません。
viewportのせいかな？と思いましたが、全てのページで条件は同じはずなので...
#header.txt
※【page_title】は置換させるためにこう書いてあります。
#footer.txt
</body> </html>#CSS
※bg.jpgは1600x1600の大きなポリゴン(フラットデザインによくある多角形がランダムに配置している)の背景画像です
body{
margin: 0;
padding: 0;
font-family: "メイリオ","Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", "ヒラギノ角ゴ Pro W6", Helvetica, verdana, arial;
font-size: 16px;
color: #333;
line-height: 1.2;
background: #EFEFEF;
}
/* ヘッダー /
.header {
color:#fff;
font-size: 12px;
overflow: hidden;
margin-bottom: 12px;
text-align: center;
padding: 20px 2px;
background: #2980b9;
background: #fff url(./img/bg.jpg) center center / cover no-repeat fixed;
}
/ ヘッダーインナー /
.header_in {
font-size: 30px;
padding: 20px 2px 5px 2px;
letter-spacing: 4px;
font-weight: bold;
}
/ ヘッダー説明欄 */
.header_dis {
font-size: 16px;
padding: 5px 2px 20px 2px;
}
何かわかる方、ご回答お願い致します！！
ご回答ありがとうございます！
そうです、共通です！
テキストの量もすべて同じです。同じファイルを参照しておりますので。唯一違うのは<head>内のページタイトルを置換しているくらいです。
サーバキャッシュは設定していないですが、ブラウザキャッシュなどのせいですかね。。
ちなみに携帯からはGoogle Chromeを使ってます！
コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
回答してから気付いたのですが、DOCTYPE宣言は、HTML5ではダメなのでしょうか？
index.php、gaiyou.phpのコードも提示していただけますか。
回答1件
0
ベストアンサー
viewport設定に「initial-scale=1.0」を追加してみてください。
HTML
1<meta name="viewport" content="width=device-width,initial-scale=1.0"> 2
-追記-
記述位置も、提示コードで言えば、<title>より上にしてください。
投稿2019/02/27 01:55
編集2019/02/27 02:00総合スコア3519
回答へのコメント
回答ありがとうございます！
ご提示して頂いたviewportと、DOCTYPE宣言もhtml5にしましたが、変わりませんでした汗
ブラウザキャッシュクリア、念の為、背景画像のリネームをしてみましたが、やはり同じでした...
あと、サファリで確認しても全く同じ状況になりました...
背景画像が上手く表示されていないですよね？プロパティを切り分けて試してみては如何ですか？
