スマホサイトにアプリダウンロードのバナーを表示させる - Qiita<meta name="google-play-app" content="app-id=表示させたいアプリのID"> <link rel="apple-touch-icon" href="アプリアイコンのパス"> <link rel="stylesheet" type="text/css" href="jquery.smartbanner.css"> <script type="text/javascript" src="jquery.smartbanner.js"></script>
解決してしまったTap delay問題 #html5j
それぞれの対応方法 Chrome、Firefox meta[name="viewport"][content="width=device-width"] IE touch-action: none iOS8 touch time(150ms)
iPhone 6で改めて考える画面解像度とUI | dotproof
新しいiPhoneの6と6 Plusが発表になりました。従来モデルよりそれぞれ少しづつ大きくなっていますが、日本ではまた人気が出るのでしょうね。特にiPhone 6 Plusの方は5.5インチと発表されていますので、前のモデルよりかなり画面が大きくなっています。 iPhoneもiPhone 3から4になった時に画面の解像度が2倍になってretinaディスプレイと呼ばれました。解像度が2倍になったので従来のグラフィック（ビットマップ）は2倍の大きさのものを用意する必要になり、@2xグラフィックと呼ばれるようになりました。今度のiPhone 6でも画面の解像度（ppi）は同じなのでやはり@2xのグラフィックで対応します。 なんで画面のサイズは4インチから4.7インチに拡大されたのに、UIグラフィックのサイズは同じでいいのかとお思いの方に向けて、改めて画面解像度とピクセルグラフィックの関係を説明
iPhone 6でのスマートフォンデザイン
iPhone 6でのスマートフォンデザイン iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ＆A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します) Q.1 iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫？ A.1 横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。 リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。 Q.
iOS 7.1－firt.dev
New minimal UI mode and old bugs on Safari by Maximiliano Firtman Twitter @firt About Newsletter Published 10 years ago (13 Apr 2014) About 6 min reading time #ios #safari #homescreen webapp As you might know, iOS 7.0 included one of the buggiest browsers of all time for iPhones and iPads. After 5 months we have now the 7.1 update that wants to give some fresh air to web developers. Let’s see if
iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告
Updated 2014.11.01 / Published 2014.03.11 The minimal-ui viewport property is no longer supported in iOS 8. ということで、minimal-uiはiOS8からは早速サポートされなくなり、iOS7.1限定のものすごく短命な機能となりました。 iOS 7.1がリリースされました。いろいろ改善されたり不具合がなおっているとのことですが、職業柄、特にiOSのSafariについてのチェックはかかせないため、チェックしていた最中に見つかったiOS7.1 Safariにおいていくつか注意すべき点を報告いたします。特にhtml, bodyともに高さ100%のコンテンツを作成している場合にiOS 7.1から指定できるようになったminimal-uiを指定すると、深刻な不具合が生じることを警告いたします。
レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20
スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ（フリック）などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。 いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。 普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。 全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCやiPhoneで確認した際には問題なく動作してたものです。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
viewportでパソコン用のウェブサイトをiPad対応
PC用のウェブサイトをiPadでタテ表示にしたときも横表示にしたときも画面内に収める方法。 このメタタグでviewportのwidthを1024に固定するとちょうど良く調整できます。 <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=0"> initial-scaleで初期倍率を指定した状態だと、回転させた時スクロールが出たり、縮小し過ぎたりとハマったので 最初からinitial-scaleは省いておくのがポイント。 もちろん、元になるウェブサイトの幅が1024px以内に収まっているのが大前提です。 関連記事 拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする iPhoneでフォームにforcusしたときズームしないようにする SSIのように外部ファイル化したパ
PC向けサイトがスマホでも崩れないようにする方法 - Qiita
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we
ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSS – Googleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや
新・三大JavaScript タッチ対応ライブラリ比較(Hammer.js/QuoJS/ TouchSwipe) - Qiita
モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。 そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。 各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。 Gesture Detector 今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。 私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。 結論 結論としてはHammer.jsをお勧めしたい
JavascriptでAndroid/iOSのバージョンを数値で取得
CSSのposition:fixに対応しているとかいないとか、Android/iOSで指定バージョン以下なのか以上なのか、バージョンの数値だけを取得したいことって多々あると思います。 （っつーか私の場合多すぎるんだが。。） なかなか使えるな～と思ったのでメモして残しておきます。 Androidのバージョンを数字の部分だけ取得 先にuserAgentを取得し、Androidという文字列が含まれていれば、文字列の「Android」をスライスして、数字だけにして、Androidのバージョンの数字だけにします。 function AndroidSversion() { var ua = navigator.userAgent; if( ua.indexOf("Android") > 0 ) { var androidversion = parseFloat(ua.slice(ua.indexOf(
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
レスポンシブデザインに欠かせないメディアクエリの記述まとめ | eturlt.net
メディアクエリのまとめです。 メディアクエリ記述まとめ 以下はすべてcssに記述します。 最小, 最大 @media screen and (min-width: 480px) { /* 幅480px以上のスタイル*/ } @media screen and (max-width: 800px) { /* 幅800pxまでのスタイル */ } OOpx〜OOpxまで @media screen and (min-width: 480px) and (max-width: 800px) { /* 幅480px〜800pxまでのスタイルを記述 */ } モバイルデバイスの向き こんなのもあります。 @media all and (orientation: landscape) { /*ランドスケープモード（横向き）のスタイル */ } @media all and (orientation:
Android 4.x のブラウザがヤバい
2013年10月24日 著 ここ2週間ほど、TwitterでAndroidのブラウザを酷評しているわけですが。そもそも「ブラウザ」って何だよ、というところからして気に食わないのですけどね。何ですかブラウザって。一般名詞を固有名詞ぽく？使うだなんて、紛らわしいことこのうえない。デフォルトブラウザとも、標準ブラウザとも呼ばれることがあるらしいけれど、しかし表記は「ブラウザ」ってあるんだもん。本当にむかつく......いや問題はそこじゃなくて。最近、最強にイライラしているのは、html - android autofit mode causing issues with css width in web page - Stack Overflowで紹介されている件。記事中にあるように、この問題には対応策が無いわけではなく、日本語で紹介している記事もあります。 androidでwidthが効かない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
Off Canvas – Jason Weaver
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた | 初代編集長ブログ―安田英久
GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs
