私はCSS3とHTML5を勉強しており、簡単なホームページを開発しようとしています。私は自分の家にMacのインターフェースしか持っていないので、窓の違いをチェックすることはできませんでした。MacのChromeとWindowsのChromeの違いは何ですか？
しかし、ある日、私の知り合いの一人が、私がまったく知らなかったブラウザ間にピクセルの違いがあると言った。それから私は私のページをチェックし、それは間違っているようだ。
私が設定したのと同じ解像度であっても、Chrome on Macはいくつかのボタンの適切な位置を示していましたが、Chrome on Windowsでは表示されませんでした。
彼らの位置はかなり異なり、デザインを台無しにしました。この問題を解決するにはどうすればよいですか？それとも普通ですか？
ありがとうございました。
オペレーティングシステムとブラウザのすべての組み合わせで同じサイトを開発するのは簡単な作業ではありません。それは私の開発時間に問題を解決しようと多くの時間を個人的に追加しました。
Cross Browser Testingなど、このタスクを手助けしようとするツールがいくつかあります。または、ブラウザにブラウザをインストールして手動でテストすることもできます。仮想マシンを使用して他のプラットフォーム上のWebサイトをテストすることも一般的です。 VMwareが人気です。
クロスブラウザライブラリを使用すると、これを支援することもできます。非常に普及しているjQueryのようなものです。このpageには、一般的なテーマに関する詳細情報が掲載されています。
違いはChromeにはありませんが、違いはMacとWindowsです。 ここでは、userAgentを検出することができますし、（jQueryを使って）bodyタグに適切なclassを追加します。
jQuery(document).ready(function(){
if(navigator.userAgent.indexOf('Mac') > 0){
jQuery('body').addClass('mac-os');
} else {
jQuery("body").addClass("pc");
}
});
のuserAgentを検出した後、あなたは特別すぎて、MacとWindowと自分のブラウザのCSSを書くことができます。
ウェブデザインへようこそ。 –
ありがとうございます。私は 'クロスブラウザー'について聞いたことがあるが、同じブラウザーであっても異なる結果が出ることは知らなかった！ MacとWindowsの違いのために自然ですか？ – Hoon
プログラムのバージョンが異なるかどうかを確認することができます。しかし、はい、異なるプラットフォームをターゲットにする場合は、それらのプラットフォームでテストする必要があります。そして、あなたのウェブサイトを私たちに示すことなく、「この問題をどうやって解決するのか」というあなたの質問があります。それは難しいだろう。 –