WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「携帯スマホサイト」での検索

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

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

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">
No.1001
05/19 17:15

edit

携帯スマホサイト
css

スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

設定できる値は以下のとおり

apple-mobile-web-app-capable : フルスクリーンにするかどうか?
【yes】フルスクリーンにする
【no】フルスクリーンにしない

apple-mobile-web-app-status-bar-style : (画面一番上のステータスバーの表示方法)
【default】標準
【black】反転(黒バック)
【black-translucent】(透明)

ただしページ内リンク以外のリンクがあるとSafariが別で立ち上がるので、jQuery-uiなどを使ってリンクを組み立てるか 次の「jquery_mobile_js_link.js」を使ってリンクを押すとjavascriptで画面遷移するように変更する必要があります。

リンクを全てJavaScriptのリンクに変更する(jquery_mobile_js_link.js)

使い方

<script src="jquery_mobile_js_link.js"></script>

jquery_mobile_js_link.js

// Initialization
jQuery.mobile_js_link = {
	init: function() {
		for (module in jQuery.mobile_js_link) {
			if (jQuery.mobile_js_link[module].init)
				jQuery.mobile_js_link[module].init();
		}
	}
};
jQuery(document).ready(jQuery.mobile_js_link.init);
jQuery.mobile_js_link.rewrite = {
	init: function() {
	    var ua = navigator.userAgent;
	    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){}
			else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){}
			else{
	        return;
	    }
		var all_tags = $('a');
		all_tags.each(function(){
			var url = $(this).attr('href');
			$(this).attr('href','#');
			$(this).click(function(){
				location.href = url;
			});
		});
	}
};
No.998
01/20 15:12

edit

携帯スマホサイト

iPhoneのsafariでフォーム入力の時に自動的に画面拡大するのを防ぐ

iPhone等スマホサイトではWEBページのフォーム入力の時に自動的に画面が拡大する事があるのですが、これは

フォームのフォントサイズが16pxより小さい

の時に起きます。

そこでこれをやめさせるには以下 A,B,C のいずれかの方法を使用します。

■A. フォームのフォトサイズを16px以上にする。(CSSファイルに記述)

input,select,textarea{
   font-size:16px;
}

■B. viewport 設定を行う(HTMLファイルに記述)

例:

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

■C. jQueryを使って任意のタイミングで拡大率を元に戻す(JavaScript)

何かのタイミングで以下のJavaScriptを実行して動的にviewportを書き換えると拡大率が変更(下記の例では等倍)できます。

$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');

■ JavaScriptで強制的にフォーカスさせたときに拡大するのを防ぐ

いくら viewport で user-scalable=no を設定していても JavaScriptでフォームに強制的にフォーカスした時は画面が拡大されることがあります。

その時は

$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
$("#hoge").css("font-size",'16px');
$("#hoge").trigger("focus");
$("#hoge").css("font-size",'');

とやって無理やり16pxにするという方法で回避できます。

No.936
01/14 13:50

edit

携帯スマホサイト
iPhone
jQuery