デバイスを横向きにした際の書式設定について

質問

https://shinsama1980.web.fc2.com/hyakuhoh-data3.htm

スマホなどを横向きにした際にホームページの文字のサイズを拡大させないようにするにはどうすれば良いのでしょうか？

「body{-webkit-text-size-adjust: 100%;}」などを試してみましたが、
アップロードしてからスマホを横向きにしてみても拡大されたままでした。
できればスクロールさせる部分が見えるくらいまで縮小できるのが理想なのですが、
そういう方法があれば是非とも教えてください。
宜しくお願い致します。

Ｐ．Ｓ
当方はＨＴＭＬ、ＣＳＳについては初心者ですので、
回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。

何卒宜しくお願い致します。

回答No.3

AsarKingChang · ベストアンサー

>これはホームページとスマホのどちらの設定によるものなんでしょうか？
見てみたんですが、拡大はされてないですね。
解像度が上がると小さく見えて、
解像度が上がると大きく見えてるだけで、
拡大はやっぱりされてないようです。
フォントを画面比率でサイズ指定する方が早いのではないかと。

お礼

いろいろと助言頂きありがとうございました。
おかげさまでようやく納得できる作りになりました。
https://shinsama1980.web.fc2.com/hyakuhoh-data3.htm

回答No.2

AsarKingChang

>それではダメなのでしょうか？
あってます。
となれば、拡大の原因を探す必要はありそうですね。
デベロッパーモードにして、
何が原因だったかを見極めたうえで、CSS上書きですね。
実は、サイズはそのままで、画面が小さくなってた？
ってこともありますから。
例えば３２ドットの文字を、640pxの幅で見るより320pxの幅で
どちらも、フルスクリーンで見れば、当然320pxの方が
大きく見えますからね！
モバイルはそれがあるから面倒なんですよね～
物理解像度と論理解像度、さらにはレティーナ解像度など。。

補足

取り敢えずテスト用のサイトを作ってみましたが、
やはりスマホを回転させると文字が拡大されてしまいます。
https://shinsama1980.web.fc2.com/Untitled_19.htm

これはホームページとスマホのどちらの設定によるものなんでしょうか？

回答No.1

AsarKingChang

https://developer.mozilla.org/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

回転は取れるので、その角度というか、
横が長いときと縦が長いときの、
CSSを基準CSSにかぶせればOKですよ！

補足

回答ありがとうございます。

ただ、リンク先にある「@media screen and (orientation: landscape)…」も試してみましたが、
その上でスマホを回転させても文字は拡大されてしまいました。
「@media screen and (orientation: landscape)…」の中で設定したい書式を記載したのですが、
それではダメなのでしょうか？