ブラウザベースとなっております。
iPadでのずれは再現されません。
iPadで表示されている感じを味わえます。
ipadpeek
2010年08月06日
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>
そこで、必要になるのがクロスブラウザ対応。。。
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。
これで簡単に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;
を設定する。
そんな余白を無くす為にはこれposition:relative;を設定した画像が入っているdiv要素に対して、
overflow:hidden;
を設定する。
-
- 0 Comment |
- 0 Trackback |