overflow: hiddenには注意

iPhoneのアプリ用のサイトを現在作っているのですが、形式としては通常のPCで見える形をそのままiPhoneで見える様にしています。

CSSで画像の横にfloatで回り込ませているのですが、回り込ませた、所に
｛ _zoom: 1;
overflow: hidden;
｝

を設定して、画像の下に行かないようにしましたが、iPhoneで確認すると
overflow: hidden;
のところが表示されません。

とりあえず、使わないように構築しましたが、やはりPCサイトをそのままiPhoneで表示させると
崩れていたり、文字がみにくかったりしますので、CSSを切り分ける様にしました。

javascript

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

if( navigator.userAgent.search(/iPhone/) != -1 ){
document.write('');
}else{
document.write(''); }

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

で、PC用とiPhone用と分ける事が可能です。

javascriptを使わない方法では下記の方法、


＜!--[if IE]>＜![endif]--＞

他にはuserAgentで分ける方法などあります。