Archive for 2014年8月

iPhone5 の Safari で WEBサイトを表示すると、小さく表示される

2014年8月16日

iPhone5 の Safari で WEBサイトを表示すると、小さく表示されるのは、iPhone 5 の Safari が「横幅 980px 向けにデザインされている」という前提で描画する。結果として、文字が小さくなる。

回避するには、<head>に、次の行を追加する。

<meta name=“viewport” content=“width=device-width”>

http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/

 

広告

gridViewをiphone 5で表示したら、列によってフォントサイズが異なっている

2014年8月16日

gridViewをiphone 5 の Safariで表示したら、列によってフォントサイズが異なってしまう。調べたところ、iPhoneでは自動文字サイズ調整されてしまうことが原因のようです。

http://kudakurage.hatenadiary.com/entry/2013/02/08/135725#comment-6435922169448804890

次のCSSを追加することにより、iphon5 の Safari では正しく表示されるようになりました。

body {
  -webkit-textsize-adjust: 100%;
}

 

responsive web design 例

2014年8月16日

<head>
<title>responsive web design 例</title>
    <link href=”css/common.css” rel=”stylesheet” />
    <link href=”css/pc.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-device-width: 601px)” />
    <link href=”css/tablet.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-device-width: 481px) and (max-device-width: 600px)” />
    <link href=”css/phone.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-device-width: 320px) and (max-device-width: 480px)” />

</head>
<body>

….

iphone 5 portraitは、width 320