ITネタ(WEBプログラム系)で気になった事をメモしていきます。
--年--月--日 (--) | 編集 |
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


2012年07月17日 (火) | 編集 |
いつも混乱するので、軽くまとめてみた。
スマホ(iPhone)で文字や画像のコピペを禁止する方法、と言ってしまうと何だが、
そのような理由からでなくても、ユーザービリティが不便にならない範囲において、
不用意に出てしまうダイアログを抑制したいという場合もある。
また、スマホでアプリを作る場合などでもそうだ。

まず、テキスト部分などを長押ししている時に出てくる「COPY」ダイアログの抑制方法。(画像1)
これは、以下のCSSで解決。
*:not(input):not(textarea):not(select),
input[type=image],
input[type=file],
input[type=submit],
input[type=button],
input[type=reset] {
-webkit-user-select: none;


スマホ、コピペダイアログC
画像1

注意されたいのは、テキストフィールドなどは、除外している点。
これも対象にしてしまうと、フォームで文字入力ができなくなってしまう。

次に、リンクや画像又はリンク付き画像の長押しで
下からヒョイと出てくるメニューの抑制方法。(画像A~C) 
  
画像A … リンクの長押し
画像B … 画像の長押し
画像C … リンク付き画像の長押し

これで解決。
body {
-webkit-touch-callout: none;
}


スマホ、コピペダイアログB
画像A
スマホ、コピペダイアログC
画像B

スマホ、COPYダイアログ
画像C


参考書籍(洋書)
「Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript」
Amazon.co.jpAmazon.com


テーマ:web制作
ジャンル:コンピュータ

コメント
この記事へのコメント
コメントを投稿
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。