ガレコレ
Garage Collection
トップページ


 HTML5&CSS3&JavaScript
 スマホでは、onclickのレスポンスが遅く、プログラミングが上手く機能しないことがあります。

 そこで、スマホではtouchイベント(tapイベント)を利用します。

onclick
 ↓
ontouchend

 今まで起きていた問題が、すべて解決したようです。

 スマホでは、ontouchendのあとにonclickが処理されます。スマホ用ontouchendとパソコン用ontouchendを併記する場合は、スマホでonclickを無視する仕組みが必要です。

--
<script>

function _click(){
  if(!("ontouchend" in document)){
    tap();
  }else{
    // 処理の順序の確認の為
    alert("click!");
  }
}

function _tap(){
  alert("OK");
}

</script>

<h3 ontouchend="_tap();" onclick="_click();">見出し3</h3>
--


P.S. 下記のように記述しても同様。いずれにせよ、ontouchendが定義されているか判断しています。

if(!("ontouchend" in document))
 ↓
if(window.ontouchend === undefined)


P.S.2 さらに、jQueryでは.on()を使用してスマートに記述できるとありますが、あまりそう感じません。jQueryは優秀ですが、自分好みではありません。


P.S.3 『子猫の手』では、この仕組みに切り替える作業をしています。
http://neconote.jp/prg/touch.html
 
 ブロック要素をインライン要素に変換します。1行に表示が収まらなかった場合は、自動的に改行されます。

--
<html>

<head>

<style>

.inline {
  display:inline;
}

</style>

</head>



<body>

<h1 class="inline">見出し1</h1>

<p class="inline">段落</p>

<div class="inline">区分</div>

</body>

</html>
--
 
 二段組で、左は左寄せ、右は右寄せにします。表示幅が1行に収まらないときは、2行で表示されます。

--
<html>

<body>

<h1 style="float:left;">ガレコレ パソコン教室</h1>
<p style="float:right;">〒781-6401<br>
高知県安芸郡奈半利町甲1942</p>
<hr style="clear:both;">

<p>本文</p>

</body>

</html>
--
 
 パソコン(表示幅800px以上)では幅800pxで中央揃え、スマホ(表示幅800px未満)では幅100%にします。

--
<html>

<head>

<style>

#center {
  width:100%;
  max-width:800px;
  margin:auto;
}

</style>

</head>



<body><div id="center">

<p>本文</p>

</div></body>

</html>
--


P.S. 『子猫の手』でも次期バージョンで、これを採用します。
 

お問い合わせ


by Network Communication Note