meta tagを追加する
<head>内に以下のタグを追加する
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-widthはviewportの幅をデバイスの幅に合わせてくれますinitial-scale=1はページのロード時のズームを一倍に設定します。user-scalable=noで、ズームができなくするようにもできます。が、モバイル端末の向きを変えたりして、ズームが変わった時に、ユーザーが元のズームに戻す方法がなくなるので、個人的には設定しない方が良いかなと感じています。
iOS Safariでの動作確認とデバッグ
simulatorと実機を使った方法の2つがある。
1. simulator
- Xcodeを開いて、メニューのXcode > Open Developer Tool > iOS Simulatorをクリック
- iOS Simulator上のSafariで動作確認したいサイトを開く
- Mac側でもSafariを開く
- Mac側のSafariのメニューのDevelop > iOS Simulator > Safariで開いているサイトの一覧が表示されるので、動作確認したいサイトを開く
- inspectorが起動するので、あとはデスクトップ用のウェブサイトの時と同じように
2. 実機
- Macにiphoneをつなぐ
- iphoneのSafariで動作確認したいサイトを開く
- Mac側のSafariのメニューのDevelop > iOS Simulator > Safariで開いているサイトの一覧が表示されるので、動作確認したいサイトを開く
- inspectorが起動するので、あとはデスクトップ用のウェブサイトの時と同じように
Andriod Chromeのデバッグ方法
実機
- Android端末のSettings > Developer optionsでUSB debuggingにチェックをつける
- Macのchromeのアドレスバーに
chrome://inspectと入力。Discover USB Devicesにチェックをつける - AndroidをUSBでMacに繋ぐ
- Macのchromeで先ほど開いた
chrome://inspectに、端末とその端末のchromeで開いているタブの一覧が表示される。 - 動作確認したいサイトの下にあるinspectをクリックすると、inspectorが軌道する
Tips
1. タップ時にelementがグレーにハイライトされるのを防ぐ
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
2. リンク長押し時のポップアップメニュー表示を防ぐ
-webkit-touch-callout: none;
3. スクロールバーを非表示にする
::-webkit-scrollbar {
display: none;
}
4. media query in js
// returns boolean
window.matchMedia('(max-device-width : 480px)').matches
5. Detecting touch devices
'ontouchstart' of window or (navigator.MaxTouchPoints > 0) or (navigator.msMaxTouchPoints > 0)
はまった点
- Android Chromeでは、
keypressイベントが呼ばれない - Android Chromeでは、
event.keyCodeまたはevent.whichが常に0である - Mobile SafariもAndroid Chromeも
input.value = newValueをするとinputイベントが二回呼ばれる。 - 環境によって呼ばれるイベントの順番が違う
- touchendとmousemoveの反応領域が違う
終わりに
毎週更新を心がけていたのですが、間が空いてしまった。色々とobjective-cに関する記事を書き溜めていたのですが、Swiftの登場で、記事自体の価値が低下してしまって、どうしようかと考えています。Swiftに関する記事を、自分の勉強のまとめも兼ねて投稿していこうかなと考えています。