iphone/ipadサイト

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処

レスポンシブデザインのサイトを作っていて、
ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。

でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。
window.resize()
とかで。


んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、
どうやらwin端末だと切り替えのタイミングがズレることがわかった。

css → 768pxで切り替えたい
  → @media screen and (max-width: 768px)
  → ちゃんと768pxで切りかわる


js → 768pxで切り替えたい
  → if($(window).innerWidth() < 768){
  →  785くらいで切り替わっちゃう

1pxズレるとかの現象じゃなく、20px近くずれちゃう。

んでよくよく観察してみると、
cssのほうはスクロールバーもふくめて768pxになったら切り替わるのに
jsのほうはスクロールバーをのぞいて768pxになったら切り替わるので、
スクロールバーの17px分くらいをを含めると785pxくらいで切り替わっちゃうんだな。

※macのchromeだとスクロールバーが 画面に薄く重なって幅をとらないのでこの問題はおきない。

いろいろ調べたけど、その問題に困ってる記事等がなくて、
あがいていたら、解決した。

それは、

jsのほうの横幅取得をスクロールバーを含めたものにすればよいということだった。

こう変更
if($(window).innerWidth() < 768){

   ↓

if(window.innerWidth < 768){
 
違いがわかりにくいけど、
上は、jqueryのinnerWidth()で、したはjavascriptのinnerWidthなの。

下にすることによって、cssのmedia queryのブレイクポイントと一致した。


めでたしめでたし。 

google maps api で地図を作った時にスマホでみるとスワイプ時のスクロールがmapに取られちゃうのを解決する

googlemapをiphoneやandroid用のスマホページに設置したときに、
でかい地図をおくと、サイトをスクロールしたいのにマップ内がスクロールしちゃって困るみたいなことあるじゃないですか。

google maps apiで指で動かしても動かないようにする設定ないの?
ぐぐっても出て来ないよ!

で、調べてみたらあった。

draggableという設定。

マウスで地図をドラッグして移動する昨日を有効にするか無効にするか、というのを選べる。
無効にすると、スマホでみたときに、スワイプでのスクロールがmapにとられちゃうことがない。

書き方は以下の感じ


var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false
};

google maps apiの使い方については、別サイトでいろいろあるので、そちらで確認してほしい。

mapを生成するときに上記のような設定を最初にすると思う。

そのときに、draggable:false というのを追加するだけ。

簡単だね!

 

スマホ(iphone/android)とpcをuseragentでわけるんだけど、androidタブレットもpc側にしたいとき

なんのこっちゃっていうタイトルだけど、

普通にユーザーエージェントで、スマホとpcわけるってやり方だと、androidタブレットが困ったことになってしまうっていうパターンがある。

ipadは、大画面なのでpc側のデザインを見せたい、というとき
当然androidタブレットもpc側のデザインを見せたいんだけど、
うっかりandroidっていうuaで分けるから、androidタブレットではスマホ用の画面が出ちゃうってわけ。

これまでandroidタブレット使ってる人が少なかったからあまり気にならなかったけれど、これからはどんどん増えていくだろうから、ちゃんとしておきたい。

そこでandrdoidタブレットはpc側の表示をしたいよ!っていうときにコピペでつかえるjsを用意しましたぞ。



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) {
document.write("<link rel='stylesheet' href='css/sp.css'>");
}




useragentがスマホだったときにホニャララする、っていうjsです。

上記の例だと、sp.cssを読み込ませるようにしてるけど、/sp/index.htmlに転送するとかもOKだぜ!

cssのfilterプロパティでbrightnessの挙動がiOS6でおかしい

css3のfilterプロパティというものがある。
W3Cでは現在wokingdraft状態のもの。

 
詳しい使い方は、まとまっているブログがいくつもあるので
このあたりとかを見てもらえればいいとして、 

filterの中のbrightnessという明度をコントロールする関数の挙動が
iOS6のsafariとiOS7のsafariでまったく違うという現象があった。


filterは、いまのところ、webkitのプレフィクスを付ける必要があり、
書き方としては以下のようになる。

img.picture{
-webkit-filter:brightness(100%);
}


pictureというclassのついた画像の明度をコントロールしたい場合
 
-webkit-filter:brightness(100%);

がもと(オリジナル)の状態。

-webkit-filter:brightness(0%);

にすると真っ黒になる。
明度が0ってこと。


100%を超えた数値をいれていけば明るくなっていって最後は真っ白になる。
(実験したところ2000%くらいで真っ白になった)


これはW3Cでも規定されている正しい挙動。


これがiOS6のsafariなどでみると以下のようになってしまう。

brightness(0%) → オリジナルの状態(明度の加工なし)
brightness(100%)→明度MAXで真っ白
brightness(-100%)→真っ黒

 
そのため、無加工のオリジナルを表示するつもりで
brightness(100%)を設定すると、iOS6のsafariでは、真っ白になってしまうっぽい。

今のところ解決策は見つかってない。

誰か知ってたら教えて。

(ちなみに今回は、brightnessを使わないで画像そのものを差し替える、という方法で解決させました) 

スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript(jQuery)

クライアントのサイトでは、大抵の場合、ヘッダーやフッターなどに電話番号画像がついたりします。

そして、こんな要望がでます

「スマホで見た時は電話番号をタップしたら電話がかかるようにしてよ」


これを実装はjqueryが便利です。

まずソースはこんな風になってるとします。

<header>
<img src="img/tel.png" alt="0120111111" class="tel">
</header> 

jqueryから処理するためにclass="tel"をつけときます。


js側はこんな感じ。

$(".tel").wrap('<a href="tel:0120111111"></a>');


.wrapというjQueryメソッドは、「周りを囲む」というもの。

リファレンスはこちら


これをすると
<img class="tel">が<a>タグで囲まれるってーわけですね。

勝手に閉じタグとの間に入れてくれるあたり、かしこいwrapさん。



あとはjs側は、Useragentをとって、スマホでアクセスした時にだけ効くようにすれば完成。

$(function(){
var device = navigator.userAgent;
if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
$(".tel").wrap('<a href="tel:0120111111"></a>');
}
});

 完成↑(コピペでいけます)


師走!
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ