スマホの送信ボタンをCSSで改善する

スマホで送信ボタンを見ると表示が変になります。

このデザインをcssを活用して修正しましょう。

デザインの変更は下記のようにしましょう。

input[type="submit"] {
 -webkit-appearance: none;
 ここにデザイン内容
}

iphoneでスクロールをさせない処理をする

PCサイトでスクロールを禁止させるには、bodyoverflow: hidden;をかけることでスクロールができなくなります。
一部Android端末ではこの実装で問題ありませんが、iOSで困ったことにスクロールができてしまうのです。

ここでjQueryの出番です。

スマホの独自イベントのtouchmoveイベントを切ってスクロールを止めることができます。

方法は下記になります。

$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});

また、途中のタイミングでスクロールさせたくなったら、off()すればいいのです。

$(window).off('.noScroll');

イベント名に、.noScrollとありますが、これはイベントに名前をつけたものです。

名前を付けるこで、他の部分でtouchmoveイベントを使っていたとしても、そのtouchmoveイベントまでイベントをoff()してしまうこともなく、.noScrollの名前のイベントのみをoff()することができます。