※ ChatGPTを利用し、要約された質問です(原文:iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいま)
iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいます
このQ&Aのポイント
iPhoneのSafariで自動的に縮小表示されないCSSについて詳しく教えてください。
iPhoneやiPodTouchのSafariでは、通常ウェブサイトが自動的に縮小表示されるはずですが、特定のCSS設定のページでは縮小されません。
CSSを削っていくと、問題の原因はbodyのwidthのCSSにあるようですが、他のサイトでは同様の設定でも問題なく縮小されています。解決方法を教えてください。
iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいま
iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいます。
iPhoneやiPodTouchのSafariは、ウェブサイトを表示する際にデフォルトで縮小表示を行いますが、以下のCSSのページの場合、これがなぜだか縮小されないのです。アクセスした状態でページの左隅しか表示されていないような感じなので、縮小して全体像をみようと画面操作してもビヨンと戻ってしまいできません。自動的に縮小表示されないというのは感覚的には無理矢理拡大されているような感じをうけます。
bodyのwidthを設定し、左右marginをautoにしてセンタリングというのはこれまでにも多くでやっており、iPhoneやiPodTouchのSafariにおいても表示に問題がないことは確認できていたのですが、なぜだか同様のCSSを設定してあるにもかかわらずいくつかのサイトで縮小表示されません。(viewportのwidthをpxやdevice-widthで設定、左右margin:autoの有無、CSSの内外は影響ありませんでした)CSSを削っていくと縮小表示されないのはbodyのwidthのCSSに行き当たるのですが、きちんと縮小表示がされるサイトも同様に記述されています。
こういった状況に心当たりのある方がいらっしゃいましたらアドバイスいただければありがたいです。
検証機種:iPodTouch(第二世代)/OS4.0(OS3.0の時も同じ症状を見たような・・・)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
body{
/*margin-right: auto;
margin-left: auto;
width: 800px;*/
}
-->
</style>
</head>
<body>
</body>
</html>
お礼
気に留めていただきありがとうございます。 viewportの記述は数値による設定も、device-widthによる設定も入れてみたのですが完全に無視されてしまいます。 普通に縮小表示されるサイトも縮小表示されないサイトも制作は私で、いずれのサイトもCSSは流用している部分も多いにもかかわらずiphone(ipodtouch)で表示に違いがでているので困っています。 iphone(ipodtouch)向けに制作していないサイトはとりあえずは一律に縮小表示されておおまかには正常に表示されると認識していたのですが、そうならないケースもあるのだと思い知らされました。 iphone(ipodtouch)という検証機材のこともありますが、このcssがレアケースなのか、ウェブ制作者の多くがまだ認識解決に至っていないからなのか、ここまで全く回答がつかないのはちょっと想定外でした。