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

スマートフォンでは、リンク先へのアンカーリンクが無効になることが多い。
普通のアンカーリンクも然り。
挙動を見る限り、メニューバーの表示を見えないように、読み込み後にスライドする機能が悪さをしているようだ。
試しに、アンカーリンクをスライドする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

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

コチラのページを参考に、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>

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

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

ヘッダー

<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>