サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
以前は iOS 系では「スクロールは2本指でできます」とか「iScroll を使いましょう」というのが定番でしたが、-webkit-overflow-scrolling: touch が登場してくれたおかげで、 .scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } という感じでCSS を書くだけで、1本指で、しかも慣性スクロールできるようになりました。 かなり楽な世の中になりました。 ちなみにAndroid でもAndroid 4.0.4 Safari/534.30 であれば、-webkit-overflow-scrolling: touch が動作しました。 が、scroll をつける div などの高さを設定しておかないとスクロールバーが表示されず、スクロールできま
2013年01月26日 最近スマートフォン対応作業が増えてきて、PCと同じ感覚で作ってると上手くいかない事がままあります。そんな中で一番「え？』と思ったのがandroidのスクロールバグです。 縦幅横幅を数値で指定したエリアに対して、overflow:scrollを入れればスクロールバーが付くのはウェブ制作者なら誰でもご存知かと思いますが、なんと、androidではこの部分にバグがあり、スクロールができないんです。 スマホサイトの場合、エリア内スクロールを実装する事自体があまり無いのかもしれませんが、サイトの利用規約とか文章が長いものを設置する場合はスクロールできるエリアを用意してページ内のスペースを節約したりすると思います。 で、これどうすりゃ良いんだよって思ってたら、解決してくれている人が居たので試してみました（http://lagoscript.org/jquery/flickabl
スマートフォンやタブレットが主流になりつつあるが、それらモバイルデバイスでWebのデバッグするのは楽ではない。User Agent文字列を変更してモバイルデバイス上のブラウザの振りをしたMacやPCのブラウザからデバッグする方法もあるが、モバイルデバイスのブラウザの機能がMacやPCと同一ではなく、モバイル特有の状況もあるため、モバイルデバイスそのものを使った状態でデバッグしなければいけないことも多い。 そのような際に使われるのがリモートデバッグだ。Mac/PCとAndroidの両方にブラウザを提供している主流ブラウザとしてはChrome、Firefox、Operaがあるが、このリモートデバッグ機能はこの3種のブラウザすべてに備わっている。また、ブラウザ開発元ではないが、Adobeもリモートデバッグ機能を提供している。すでに使っている人も多いと思うし、それぞれ多くの情報が提供されているの
こんにちは、石尾です。Android端末のChromeをリモートデバッグする場合、Android SDKをインストールして、adbコマンド(Android Debug Bridge)を利用していました。 adbコマンドのリモートデバッグ これが当たり前だと思っていましたが、Chromeの拡張機能「ADB」を利用すれば、SDKをインストールする必要はありません。PC： OS：Windows7(64bit)Chromeバージョン：30.0.1599.101Android端末： OS：Android4.0.3Chromeバージョン：30.0.1599.82 1.インストールPCのChromeからChrome Web Store - ADBにアクセスし、インストールします。 インストールすると、メニューに「ADB」アイコンが追加されます。 2.使ってみますPCとAndroid端末をU
流行りのレスポンシブウェブデザインですが、効率のいい実装方法はないかと日々探しています。今回はjavascriptで条件分岐とかしたい時のおはなし。 こちらの記事(英語)を参考に疑似要素(::after)とcontentプロパティを使って簡単に条件分岐できるやーん！っていうのをやってみたんだけど、これダメだ全然使えません。 いや、使えるんだけどね。考えた人はすげぇ天才！って思うんだけど、何がダメってAndroid(2.3〜4.0.3)がクソすぎた。 参考記事に書いてあるやり方をiPhoneで動くように修正すると以下。CSS @media only screen and (max-width: 640px) {html::after { content: 'x-small'; display: none; } } document.defaultView.getComputedStyle
読了: 約 5 分 スマートフォンサイト制作でもブラウザ・機種依存に悩まされますよね。 納期が短かったりするとホントに＼(^o^)／ｵﾜﾀという感じになるので メモしておきます。 photocredit: Cloned Milkmen via photopin cc 個人的にはAndroidのおかげで凄く工数がかかっています。 特殊な案件であるとは思いますが、そういう案件もスムーズに乗りこなせる変態になりたいですね。 [css,css3,html] スマｰﾄフォン(iPhone,Android)ブラウザのバグまとめ スマートフォンサイトをデザインする上で知っておくべき10のTIPS 以下はコーディング上の注意点と、それ以前のクライアントにデザインを提出する際の注意点です。 ガラケーでもそうですが、できないものをデザインしてしまうと後が辛くなってしまいますので、 注意が必要です。 フ
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
例えばスマートフォンでアクセスした時に、スマートフォン用のアドレスに飛ばすなどユーザーエージェントで判別して処理を変える方法のメモです。 ▼スマホ（iPhone,iPod touch,Android）の場合の条件分岐 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) { //スマホ（iPhone,iPod touch,Android）の場合 alert('おっす、スマホちゃん！'); }
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
iPhone, AndroidでURLバーを隠すスマートフォンは画面が小さいのでURLバーを非表示にしたい時がある。 そんな時は scrollTo(0, 1); これでurlバーが隠れる。 縦のスクロールが0だとAndroidが反応しない ページの高さが画面の高さより小さい場合はURLバーは出たまま。 スクロールできないからね。 -- add: ※ページ読み込み時に上の処理を無条件で動かすと、この処理が動く前にスクロールしてたのが、一番上まで戻されることになってしまうので注意。 スクロールされていない時だけに限定したほうがよさそう if(docment.body.scrollTop === 0){ scrollTo(0, 1); } 参考：iPhone／Androidブラウザのアドレスバーを隠す方法
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめAndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
こちらの記事で使用していたプラグインjquery.touchSwipe-1.2.4がAndroidの2.2以下のバージョンに対応していないので、それを下回るバージョンをjavascriptで振り分ける処理を書きました。備忘録。 ヘッダ、または共有しているjsファイルに下記を記述。 function lowerAndroid(n) { var bo = false; var ua = navigator.userAgent.toLowerCase(); var version = ua.substr(ua.indexOf('android')+8, 3); if(ua.indexOf("android")) if(parseFloat(version) こんな感じで呼び出します。 var bo = lowerAndroid(2.2); alert(bo);//2.2（含まない）以下はtru
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS /Android で動作確認済み。 タッチできないPC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 →iPhone /iPad /Android マウス環境 → Sleipnir / IE / Firefox /GoogleChrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
2010年05月03日02:11 カテゴリAndroidAndroid マルチタッチでImageViewの拡大、縮小、移動のサンプル HTC Desireも出てAndroid2.1の実機があれこれ触れるようになってきたので、 早速マルチタッチでImageViewの拡大、縮小、移動をやってみました。プロジェクトを置いておくので見てもらうのが一番なんですが、 ちょっとだけ解説もしようと思います。 1.画像を出す res/layout/main.xmlの中身です。 見難いですが肝はjp.dip.sys1.multitouch.ScalableViewです。ScalableViewはImageViewを継承して作りました。 タッチイベントを受け取る為にandroid:focusable、android:focusableInTouchMode、android:clickableをtrueにし
AboutCreatorish.com EditCreatorish.com is a captivatingdomain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting acreative and imaginative mindset.It's perfect for startups that focus oncreativity, design,technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, makingit a
「apple-touch-icon」を指定した場合は、iPhoneとAndroidどちらも同じアイコンになりますが、「apple-touch-icon-precomposed」を指定した場合は、それぞれ異なるアイコンになります。iPhoneは、「apple-touch-icon」「apple-touch-icon-precomposed」ともに、最初に指定したアイコンが有効になるようです。一方Androidは、「apple-touch-icon」の場合は最初に指定したアイコン、「apple-touch-icon-precomposed」の場合は最後に指定したアイコンが有効になるようです。 この違いを利用して、次のような順序で記入すると、iPhoneとAndroidに異なるアイコンを指定できます。 <link rel="apple-touch-icon-precomposed" href=
Androidのposition:absoluteとフォームの問題Androidではposition:absoluteをした要素内にフォーム部品があると色々と不具合があるようです。 例えば、次のようにフォーム部品の背景になにか文字列があるような状態にしてしまうとAndroid2.2でフォームが選択できなくなります。Android2.1ではちゃんと選択できた。 <style> body{ margin:0; } #search{ width:100%; height:100px; background:blue; position:absolute; } #back{ width:100%; height:100px; } </style> <div id="search"> <br> <select> <option>選択1</option> <option>選択2</option> <
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
