スマホのボタンタップUIをCSSとJavaScriptを使って良い感じにしてみる | TENPURA - 1→10design Lab -
スマートフォンのボタンのタップUIは、 iPhoneとAndroidではデフォルトのUIが異なります。 iPhoneでは黒く透過し、Androidでは黄色い枠がつきます。 VIEW DEMO ※ スマホで見て下さい。 iPhoneではデザインに余り影響が出ないのでいいですが、Androidは濃い色がついてしまうので、黄色を使っていないサイトのデザインでしたら、どう見ても不自然に目立ってしまします。 大半のスマートフォンサイトはこういったUIのままリリースされているのが現状です。 そういったデフォルトのタップUIを消すには下記のCSSを記述すれば消えます。 body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color:
スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]
ページ内でスマートフォンかどうかを判別し、表示を切り替えたい場合のスクリプトを紹介します。 JavaScriptでiPhone、Androidを識別してそれぞれの端末へメッセージを表示には、ユーザエージェントを使います。 navigator.userAgent で取得したユーザエージェント情報から「iPhone」という文字が合った場合の処理をする場合は、 indexOf を使って以下のようにします。 /* iPhoneという文字が見つかった場合 */ if ( navigator.userAgent.indexOf('iPhone') > 0 ){ } indexOf()メソッドは、指定したキーワードの発見位置を返します。発見できなければ-1の数値を返すので、値が0より上であればキーワードが発見できたと分かります。 iPhone/iPad/iPod/Android毎に処理を分けるには次のよ
![スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
PC/スマートフォンで背景画像を固定する - Cube Lilac
Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと（PC で閲覧する分には問題ないのですが）手元の iPhone (iOS 5.1.1) では固定されませんでした。 /* この方法だと、iPhone（スマートフォン）で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ } そこで少しググってみ
スマートフォンとposition:fixedのバグ
スマートフォンとposition:fixedのバグ iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。 Androidではuser-scalable=noが必須 <meta name="viewport" content="user-scalable=no" /> Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。 サンプル（user-scalable=noあり） サンプル（us
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
iPhone と Android の onOrientationChange タイミングの違い - makogの日記
またスマートフォン対応サイトネタ、Androidネタです。 Androidのブラウザにて。Android 2.2から、iPhoneと同じように縦持ち・横持ちが変わった際に発生するイベント「window.onorientationchange」が使えるようになっているようです。ですが、このイベントが起きるタイミングがiPhoneとAndroidで異なっているようです。 var $win = $(window); var debug = $('#debug'); $win.bind( 'orientationchange', function() { debug.html( debug.html() + 'orient:' + $win.width() + ', ' ); } ) .bind( 'resize', function(){ debug.html( debug.html() + '
iPhoneやandroidでのサイトでは電話番号にもリンクをつけたほうがいいですね
そういえば、 パソコンでサイトを見ていて、ホームページの電話番号をクリックして電話をかけるとうことはないですが、 ケータイサイト、iphone、googleケータイからみていると、電話番号からかけられるとすごい便利。 というか、そうでないとだめですね。 で試してみると、 ■ iphone： 電話番号らしき文字列は、自動的にリンクにしてくれている模様 ■ android： 何も変化なく、ふつうに表示。 探してみました。 携帯用のHTMLで電話をかける 【a href=”tel:電話番号”】 というのがあるらしい。 < a href = ” tel:090-xxx-xxxx ” >電話してね< /a > < a href = ” callto:090-xxx-xxxx ” >電話してね< /a > なるほど、そういう要望は携帯だからあるのだからね いまどきだと、ふつーのサイトでも いれたほうが
ユーザーエージェントによるスマートフォンの端末判別方法について αSEO
今回は、「ユーザーエージェント（UA）によるスマートフォンの端末判別方法について教えて下さい」という質問に対して回答します。 スマートフォンのユーザーエージェント（以下「UA」と記載）は、フィーチャーフォンなどと同様に、端末の種類、OSのバージョン、ブラウザの種類などの条件ごとに固有となっております。そのため、スマートフォンからのアクセスに含まれるUAの文字列でそれぞれの端末を判別することができます。 iPhone4などに代表されるiPhoneシリーズのUAには、共通して【iPhone】という文字列が含まれている事が特徴です。一方、Nexus OneやGALAXY SなどのAndroid携帯端末のUAは、共通して【android】と【mobile】という両方の文字列が含まれている事が特徴です。 例） ・iPhone4のUA：Mozilla/5.0 (iPhone; U; CPU iPhon
iPhone/AndroidでURLスキームを利用したアプリ起動
iPhone/AndroidでURLスキームを利用したアプリ起動 iPhoneのSafariやAndroidのブラウザなどからURLスキームを利用することで直接アプリを起動することができるようになります。 アプリにはそれぞれURLスキームが割り当てられています。例えばTwitterならば「twitter://」これをhref属性に指定することでTwitterアプリを直接起動することができます。 <a href="twitter://">iPhoneでアプリ起動</a> 「hoge://」のようにインストールされていないアプリを指定した場合は「ページが開けません」とエラーが表示されます。（Androidではエラーページに移動） 上記の記述ではAndroidでアプリ起動はできませんが、次のようにパラメータを追加することでiPhone/Androidともにアプリの起動が可能です。(Android
スマートフォンで傾きを検知するJavascript | Liglog
スマホ対応にて、傾きを検知するjsのメモ。 ブログを、PC版と共通の記事を使ってスマホ対応とする場合、viewpointに値を書いてリキッド対応でコーディングしておけばうまいこと表示されるはずなのですが、画像や動画まわりで、jsで動的に値を指定していたり、iframeで貼っていたりなんかのときに、機種により少々解釈が微妙だったり、なんてことがありました。 そこで、縦横を取得して動的に値を書きなおす処理をねじ込むときの自分的メモです。以下ぶっきらぼう気味に。 記述はこちらを参考にさせてもらいました。 現在の傾き具合の取得 傾きは、window.orientationと記述することで取得 返り値は0,90,-90など var orientation = window.orientation; if(orientation == 0){ //縦向きの時の処理を記述 }else{ //横
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Androidスマホ修理 - 東京・大阪・滋賀のスマートフォン修理 スマートまっくす | 全国対応
Google ChromeでUser Agentを偽装する方法（１） | スマートフォンサイト作成 ノウハウ集
Android端末でのbackground-sizeでハマった
07design.net
地図アプリを起動させる: まじめにWeb制作
http://case-mobile-design.com/iphone-andoird%E5%90%91%E3%81%91%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E3%81%AEjquery%E5%B0%8F%E6%8A%80%E9%9B%86/
http://www.webcreatornote.com/2012/02/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E9%9B%BB%E8%A9%B1%E7%99%BA%E4%BF%A1%E6%A9%9F%E8%83%BD%E3%82%92%E6%89%8B%E5%8B%95%E3%81%A7/
はてなブログ | 無料ブログを作成しよう
