2010年08月06日

iPad:WindowsでもiPadエミュレータ

ブラウザベースとなっております。
iPadでのずれは再現されません。

iPadで表示されている感じを味わえます。

ipadpeek
    • 0 Comment |
    • 0 Trackback |

iPad:ユーザーエージェント判別 javascriptでCSS切り替え

最近、iPadに対応する機会が増えてきました。
そこで、必要になるのがクロスブラウザ対応。。。
iPadはだいたい問題無く表示してくれるのですが、今回は対応がひつようになり、CSSを切り替えるようにしました。
PNG画像をPOSITIONで重ねて表示してたのですが、chromeとiPadがずれました。

iPadのユーザーエージェントは下記

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

のようになっております。

javascriptでの切り替え
<script type="text/javascript">
if (navigator.userAgent.indexOf('iPad') != -1) {
document.write('<link rel="stylesheet" type="text/css" href=iphone.css">');
}else {
document.write('<link rel="stylesheet" type="text/css" href="main.css">');
}
</script>


    • 0 Comment |
    • 0 Trackback |
2010年08月04日

CSS:PNG画像をIE6でも透過するようにする。

IE PNG FIX

これで簡単にPNGが透過出来るようになります。


IE PNG FIXからiepngfix.zipをダウンロード

「iepngfix.htc」、「blank.gif」をフォルダにコピー。
この二つは同じ階層に入れておくと良いでしょう。

透過させたい画像の要素に下記のCSSを指定する。
パスはCSSからのパスではなく読み込んだファイルからのパスになります。
絶対パスにしておくとよいでしょう。

#main img { behavior:url(/common/iepngfix/iepngfix.htc) }


これでOK。
    • 0 Comment |
    • 0 Trackback |
2010年08月03日

HTML:position:relativeにしたらIE6で余計な余白ができてしまう。

PNG画像を重ねたりする時にposition:relative等を使ったりしますが位置をLEFT:10px TOP:-50pxのように動かした時に元の位置に余白ができてしまう。

そんな余白を無くす為にはこれposition:relative;を設定した画像が入っているdiv要素に対して

overflow:hidden;

を設定する。
    • 0 Comment |
    • 0 Trackback |