続：レスポンシブのサイトでスマホの時だけtelリンクを有効にする ｜ Tips Note by TAM
前回の記事「レスポンシブのサイトでスマホの時だけtelリンクを有効にする」の続きです。 前回紹介した記事の記述では、単純に 「ユーザーエージェントが『iPhone』『Android』であるデバイス」のみ、 電話番号にtelリンクを設定しました。 しかし、実はこれだけでは以下のような問題があります。 ユーザーエージェントに「iPhone」を持つデバイスの中には、「iPod」も含まれる。 ユーザーエージェントに「Android」を持つデバイスの中には、「Androidタブレット」も含まれる。 電話をかけることのできないiPodやタブレットで、 電話番号にtelリンクが設定されるのは好ましくありません。 そこで、 「ユーザーエージェントに『iPhone』を持つデバイスのうち、『iPod』も含むものを除外」し、 「ユーザーエージェントに『Android』と『Mobile』を含むもの」にtelリンク
レスポンシブなWebページで、スマートフォンを判別して電話番号リンクを有効に｜cleverdog
レスポンシブなWebページでは、スマートフォンからの閲覧時には電話番号をタップで発信出来る様にしたいので、jQueryで対応しました。 <a href="tel:00-0000-0000">電話をかける</a> 上記のようなtelリンクを使うとスマホから発信出来るようになるので、ユーザーエージェントを判別して、スマホからのアクセスの時のみhtmlを書き換える処理をします。 電話番号の表示を画像でデザインすることも多いので、画像の場合はaltの内容を番号に指定します。 【JS】 $(function(){ var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.tel-link').each(function(){ if($(this).is('img')) {
レスポンシブ・ウェブデザイン基礎
1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/
