回答受付が終了しました

htmlを組んだのですがmacのノートパソコンで見るのと windowsのデスクトップで見た時と写り方が違うのですが これはなぜのでしょうか? 画像が被っているのがwindowsの方です。

画像

回答(4件)

0

>htmlを組んだのですがmacのノートパソコンで見るのと >windowsのデスクトップで見た時と写り方が違うのですが >これはなぜのでしょうか? >画像が被っているのがwindowsの方です。 「PCモニター、タブレット、スマホ」は機種によって解像度が違うからです。 PCの場合、現在4k画面が普及価格帯で販売されており、また高解像度モニターは(高価ですが)「5k画面、6k画面、8k画面」も販売されています(そのうち量産効果で安くなるか?)。 逆に低解像度モニターは(2020年9月現在、価格.com調べ)横幅が800pxと言う画面もあり、アスペクト比は「4:3、16:9」の2つがあるようです。 「スマホ、タブレット」の場合、端末の物理的な解像度と、ブラウザ上の解像度は違うようで、ブラウザ上の解像度を「CSSピクセル、dp解像度」と言うらしいです。 iOS・Android端末のCSSピクセル・dp解像度一覧 https://wemo.tech/1496 下記「ダメダメ・デモ」をChromeモバイル・エミュレーターで約「1000px~3000px」解像度でチェックしてみれば一目瞭然です(表示の大きさが変わる)。 モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい。 ダメダメ・デモ http://xd305417.html.xdomain.jp/demo/test/005.htm 自分が作ったページも「1k~3k」解像度でチェックしてみると良いでしょう。 PCフレンドリー・デモ http://xd305417.html.xdomain.jp/demo/test/003.htm Chromeモバイル・エミュレーターの操作法 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51& モバイル・エミュレーターは、当然 スマホ用エミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにするか削除して下さい。 そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。 Chromeモバイル・エミュレーターでチェックする場合、モニターは かえって1k解像度のほうが分かりやすいでしょう。 現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px~1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。

0

画像の表示サイズを、きちんと決めて記述しましたか? CSSでクラス設定任せとかになっていませんか? ブラウザの表示サイズ設定は、両方とも字の大きさと倍率は同じですか? また、WiindowsとMacでは表示するフォントが全く違います。 iOSで見るとのandroidで見るのとでも又違いますし、ブラウザの表示設定はカスタマイズできるので、見る人によってまったく変わります。 どうしても表示したいイメージやサイズがあるなら、文字は相対的大きさをポイントの絶対数で指定して、せめてゴシックか明朝か、プロポーショナルか等幅フォントかは設定して、画像も表示サイズをidタグなりできちんと設定しましょう。 それでも、閲覧者がフォントの大きさを「特大」とか、画面表示倍率を上げ下げしていたりとかすれば、変わるかもしれませんが。

0

ブラウザの差とCSSファイルはちゃんと差が出にくいように設定していますか?