YoshiYoshi's Technical Notes
Amebaでブログを始めよう!

CSS:iPhoneの文字サイズ自動調整を解除

iPhoneは自動でフォントサイズを調整する機能があります。
そのため、「font-size」を指定しても、意図したサイズにならない時があります。

その自動調整機能を解除する方法です。

CSS

body {
-webkit-text-size-adjust: none;
}

jQuery:画面の拡大表示

スマートフォン用にデザインされた画面をタブレット型端末で参照すると、<META>タグにてViewport指定していても拡大表示されません。

YoshiYoshi's Technical Notes-Before


画面サイズに合わせて拡大表示するには、次のjQueryで可能です。

CSS

<script type="text/javascript">
<!--
$(window).bind('resize load', function(){
  $("html").css("zoom" , $(window).width()/320 );   /* 320は表示画像の横幅ピクセル値 */
});
//-->
</script>



$YoshiYoshi's Technical Notes-After

HTML:画面の中央に表示する

ウィンドウ(画面)の中央に表示させる、ウィンドウサイズが変更されても中央に表示させるには、次のスタイル指定を行うと可能です。

CSS

#dialog {
  position: absolute;
  top: 50%; left: 50%;                //画面の中央を開始位置にする
  width: 280px; height: 220px;
  margin-left: -140px; margin-top: -110px; //表示部品の半分をネガティブマージンする
}



HTML

<div id="dialog">
</div>