スマホサイトのコーディング時に役立つ小技8

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/06/14 21:55

ただいまコメントを受けつけておりません。

スマホサイトのコーディング時に役立つ小技8

たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり）

http://designcolor-web.com/2014/06/09/smartphone-site-tips8/

1. 幅をデバイスサイズに合わせる

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.スマホを横にしたときに文字が大きくならないようにする

body {-webkit-text-size-adjust: 100%;}

3.電話番号に自動的にリンクが付かないようにする

<meta name="format-detection" content="telephone=no">

4.リンクを押したら電話をかけられるようにする

<a href="tel:0120-00-0000">0120-00-0000</a>

5.リンクを押したらGoogleマップアプリを起動させる

<a href="http://maps.google.com/maps?q=住所">住所</a>

6.リンクエリアを広げる

display: block;

7.paddingやborder分を気にせずwidth/heightの数値を指定する

box-sizing : border-box ;

8.長い文字列でも途中で改行させる

word-break: break-all;