MENU
◆WindowsとMacでスタイルシートを振り分ける
WindowsとMacでは様々な違いがあり、同じデザインでも見た目が大変違います。
制作者はMacを使うことが多いのに、ユーザーはWindowsが多く違いを修正する必要があります。
いちばんの違いは解像度が違うことからMacではかなり大きく見えるということ。
そしてWindowsでいちばん使われているブラウザのIEがMacではほとんど使われません。
少ないとはいえiPodの普及によってMacユーザーも増えていますからMac対策も必要です。
一般的にはスタイルシートを２つ作って、WindowsとMacで振り分けて使います。
 

◆WinとMacのスタイルシートの振り分け

<script type="text/javascript">
<!--
var osname = navigator.userAgent.toUpperCase();
if(osname.indexOf("MAC") >= 0){
document.write( "<LINK REL='stylesheet' HREF='style_mac.css' TYPE='text/css' MEDIA='all'>" );
} else {
document.write( "<LINK REL='stylesheet' HREF='style_win.css' TYPE='text/css' MEDIA='all'>" );
}
//-->
</script>
<noscript>
<LINK REL='stylesheet' HREF='style_win.css' TYPE='text/css' MEDIA='all'>
</noscript>
 
WindowsとMacではフォントが違うので字間行間も指定が違ってきます。
※Macは大きく表示されるのでWindowsよりフォントをひと周り小さくする。
※Windowsのフォントは字間が狭いのでletter-spacing:1pxとして字間を開ける。
※WindowsとMacのフォントの違いによる行間の差を少なくするためline-heightを変える。
 
このページのように罫線の上に文字をのせるようなデザインではより厳密な指定が必要になります。
Copyright2008 ©Atelier H All rights reserved.