iPhone、AndroidのモバイルWebでの長押しアクションを無効化する - paranitips
モバイルWebにおいて、セキュリティ上、WebのリンクURLを表示させたくなかったり、 テキストのコピーを防止したい場合があります。 これらの長押しアクションを無効にするにはbodyのcssに以下を追記します。 body { -webkit-touch-callout:none; // リンク長押しのポップアップを無効化 -webkit-user-select:none; // テキスト長押しの選択ボックスを無効化 } 補足 また、一般的なWebサイトの右クリックの無効化は <body oncontextmenu='return false;'> コピーの無効化は <body oncopy='return false;'> でOKです。 （developerツールを使えば簡単に解除できますが。） 参考 iPhone リンクを長押しした時のポップアップメニューの制御 « TriAx Lab
iOS8のバグ-webkit-overflow-scrollingで要素が消える不具合 | 2eb
iOSで慣性スクロールを有効にするCSS「-webkit-overflow-scrolling:touch;」を追加するとiOS8で発生することがある要素が消えるバグとその解決方法を紹介しています。iPhoneやiPadなど、iOSで慣性スクロールを有効にするCSS「-webkit-overflow-scrolling:touch;」を追加することで、疑似フレームを使用した要素も滑らかにスクロールさせることができます。 操作性が格段によくなるので、是非とも指定したいプロパティなのですが…複数の条件が重なると不具合が発生してしまいます。 発動条件は［iOS8でページ読み込み時に非表示の要素に-webkit-overflow-scrolling:touch;を指定している］場合のようで（実際はもっと複雑かも）、スクロールしようとタッチした瞬間にその要素が消えてしまうという悲惨なバグです！！:
iOS8 Safari -webkit-overflow-scrolling: touch; issue
So we are building this web app for a client which worked perfectly on iOS7 in Safari. But when we checked the app out in iOS8 it had a some huge bugs. If a user opens the sidebar and closes it, content that is in a <section style="overlay-y: scroll;"></section> disappears ( the overlaid part ). Some buttons stopped working for any reason. ( <a href="">Lala</a> ) When we remove -webkit-overflow-sc
スマートフォンのファビコン｜シラサヤ備忘館
iPhoneのWebクリップという機能を使ってホームにアイコンを表示することができます。 PCでいうファビコン(favicon)のようなもの、と考えて良いです。 このWebクリップを使うと、 サイト側でアイコンの指定をしていない場合、サイトのトップ部分を画面キャプチャしたアイコンが自動で作成されます。 ま、自動で作成してくれるのはそれはそれでいいのですが、 やはりアイコン画像くらい用意しておきたい所です。 さて、このアイコンの指定方法についてですがあちこちで情報が氾濫していて 正しい情報と間違った情報が普通に溢れかえっているのでここで整理しておきます。 まず、iPhone用に必要になってくる画像のサイズは57x57ピクセルのpng画像。 128だとか256だとか512とか必要ありません。 というかサイズが大きいと無駄なトラフィックが発生するだけなのでやめましょう。 ただ、サイズが違った場合
iPhone/iPad用Safariのlabelタグの問題を解消する - jsdo.it - Share JavaScript, HTML5 and CSS
iPhone/iPadのSafariで見てください。 通常labelタグのfor属性とinputのid属性を一緒にすることで 関連付けられたテキスト部分をクリックしてもチェックを付けることができるが iPhone/iPad用Safariではなぜか反応しない。 javascriptを使って、clickイベントでcheckする必要があるが clickイベントだけで、イベントの中に何も記述しなくても 問題なく動作する。 【追記】 もしかしてと思いonclick属性をlabelに付けたら、それだけで動きました。 【追記：2011/10/14】 iOS5のsafariで確認したところ、修正されてませんでした。 【追記：2012/10/30】 iOS6のsafariでこの問題は解消したようです。 $(function(){ var ua =navigator.userAgent; if(ua.inde
iPhone,iPad用サイトでlabelタグが使えない件-パソコン・office・PHP・フリーソフトなどの各種豆知識をご紹介｜SGブログ-
フォームを作る際に、ユーザビリティを激的に向上させるひとつに、チェックボックスやラジオボタンと一緒に使うlabelタグがあります。 例えば↓これが普通のチェックボックス チェックして下さい これにlabelタグをつけてあげると↓こんな感じ チェックして下さい こうすると、「チェックして下さい」をクリックしても、チェックボックスにチェックが入ります。 ただ、iPhoneやiPadに搭載されているブラウザのMobile Safariでは、このラベルタグが使えません。。 使えるようにして欲しいですがしょうがないです。 なのでJavaScriptで解決！ 手っ取り早くjQueryでliにclickイベントを発動させてあげるだけ！ jQueryを読み込んでいる前提で、下記の感じで <!-- ↓html↓--> <ul> <li><input name="test" value="test" type
html999 » スマートフォン用サイト-はじめてのコーディングの前におさえておくこと
はじめてスマートフォン向けサイトを制作したときに調べたことのまとめ。 （※スマートフォン専用サイトでiPhoneとAndroidに対応させる場合） 基本的にリキッドデザインにする 画面サイズの目安は、縦のとき：幅320px×高さ480px 横のとき：幅480×高さ320px。 iPhoneの場合は上記サイズで問題ないけど、AndroidのXperiaでは長いページのときにスクロールバーが表示され（初期のモデルSO-01Bで確認したので最新のは違うかも）320pxよりせまくなるっぽい。 あと、横に向けたときにいい感じに伸びてほしいと言われる（可能性がある）ので、スマートフォン専用のサイトならばリキッドデザインにしておいた方が無難。 （2013/10/23追記） Xperiaの初期モデルSO-01BのAndroid 1.6のとき（バージョンアップした場合は分かりません）の縦表示時の有効幅は31
スマートフォンサイトで電話番号やメールの自動リンクを解除したい – helog
iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。 リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。 しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。 長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。 例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。 自動リンクを無効にする このような問題を回避するために、自動リンクを無効にする方法があります。 電話番
iPhone Icon, Favicon, .ico Generator
Home Upload Image Preview & Download apple-touch-icon usage .ico & favicon usage Favicons, apple-touch-icons, iphone application icons: An often overlooked design element which brands your website with an icon are generally called Favicons. The original Favicon was a Windows resource file which includes a 16x16 pixel image. Today, with Vista and Windows 7, the .ico format can display an
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.bluearrowslab.com/smartphone/topicks/190/
jQT