WEB制作(html・css(スタイルシート))に関する各種メモ書き

スマホサイト制作時に設定しておくと良いhtml, css, JavaScript 項目

スマホサイト制作時に設定しておくと良いhtml, css,js項目

1. リンクを押した時に押した領域に色をつける

a{
	-webkit-tap-highlight-color: rgba(200,200,200,0.2);	
}

2. 画像がはみ出すのを防ぐ

img{
	max-width: 100%;
	height: auto;
}

3. ボーダーを追加した時に width, height が増えるのを防ぐ

*{
	box-sizing: border-box;
}

4. スマホで見た時に横に移動(左右にグラグラ)するのを防ぐ

<body>
 <div class="wrapper">
  ここに記述していきます。
  </div>
</body>
.wrapper{
	overflow: hidden;
}

5. フォーム入力時に画面がズームするのを防ぐ

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. ページ表示時にページ上部のナビゲーションを飛ばしてコンテンツの先頭を表示させる

<!-- コンテンツここから -->
<a name="detail_top"></a>
function is_smp(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        return true;
    }
}

$(function() {
  if ( is_smp() ){
    location.href = "#detail_top";
  }
});

関連エントリー

No.1001
01/25 17:25

edit

携帯スマホサイト
css