カテゴリー: Android

伸縮する画像をスマホで表示

画像を16個並べた状態で、綺麗に伸縮するソースを書くのに手こずったのでメモメモ。
結局tableが一番美しいな。あんまりレイアウトに使うの良くないのだけど。
cssのdisplay:tableうんちゃら;でもいいのかもしれないが、html5のブロック要素まわりの改変がまだよくわからないので、避けておいている。


		<div class="div_Wrap clearfix">
			<table id="photoAllWrap" cellpadding="0" cellspacing="0">
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
			</table>
		</div>

#mainWrap .div_Wrap {
	width:94%;
	max-width:600px;
	margin:auto auto 30px auto;
}

#mainWrap #photoAllWrap {
	width:94%;
	margin:auto auto auto;
}

#mainWrap #photoAllWrap tr td{
	width:25%;
	padding:2px;
	background-color:#ffffff;
}

#mainWrap #photoAllWrap img {
	width:100%;
	border:2px #999999 solid;
}

スマホでアンカーリンクを有効にするには

スマートフォンでは、リンク先へのアンカーリンクが無効になることが多い。
普通のアンカーリンクも然り。
挙動を見る限り、メニューバーの表示を見えないように、読み込み後にスライドする機能が悪さをしているようだ。
試しに、アンカーリンクをスライドするjavascriptを使ってみた結果、アンカーリンクが有効になった！
iOS6とAndroid2.2で確認。
使わせていただいたスクリプトはこちら。

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3
http://coliss.com/articles/build-websites/operation/javascript/296.html

あと、画像のサイズも指定できるならした方がいいみたい。（画像でheight算出させてる時は面倒だけど）

iphone5 アンカーリンクに気をつけろ！
http://sp.vitalify.jp/archives/?p=1082

パソコンサイトからスマホサイトへの導線２

コチラのページを参考に、Windws Phoneとかにも対応してみました。

http://www.movabletype.jp/blog/mtddc2011_special_04.html

<script type="text/javascript">
	(function(){
		var ua = navigator.userAgent;
		if (localStorage 
			 && !localStorage.getItem("sp_flag") 
			 && (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Windows Phone') > 0 || ua.indexOf('Symbian') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Android') > 0 )) {
			if(confirm('スマートフォン用サイトを開きますか？')) {
				location.href = 'http:/t1200.jp/sp/';
			}else{
				localStorage.setItem("sp_flag",true);
			}
		}
	})();
</script>

パソコンサイトからスマホサイトへの導線１

こんなふうにしてました。

ヘッダー

<script type="text/javascript">
    if (navigator.userAgent.indexOf('iPhone')>0 ||
        navigator.userAgent.indexOf('iPod')>0 ||
        navigator.userAgent.indexOf('iPad')>0 ||
        navigator.userAgent.indexOf('Windows Phone')>0 ||
        navigator.userAgent.indexOf('Symbian')>0 ||
        navigator.userAgent.indexOf('BlackBerry')>0 ||
        navigator.userAgent.indexOf('Android')>0) {
        document.write('<style type="text/css">#spNavi{display:block;}</style>');
    }else {

    }
</script>

ボディの頭に

	<a id="spNavi" href="./sp/">
		スマートフォン版は<br>こちらをタップ
	</a>

iOSとAndroidの表示振り分け

暫定。もっと綺麗に書き換えられる気もする。

<!-- 表示の出し分け --> 
<script type="text/javascript">
$(function(){
	var ua = navigator.userAgent;
	if ((/iPhone/.test(ua) || /iPad/.test(ua)) && (/OS 6/.test(ua) || /OS 7/.test(ua) || /OS 8/.test(ua))) {
		 // iOS6～8向けの処理
	} else {
		if (/Android 4/.test(ua) || /Android 5/.test(ua) || /Android 6/.test(ua)) {
			// Android4～6向けの処理
		} else {
		 // それ以外向けの処理
		}
	}
	return false;
	});
</script>