投稿日:

iOS8でwindow.close()が効かないバグ (8.1.1で修正済)

window.close()が効かないバグは
2014年11月のiOS 8.1.1アップデートで無事に修正されていました。

以下は、～8.1.0 時点の記事です。

iOS 8.0.x 8.1.0 のSafariでは
開いているタブを閉じるwindow.close()が使用できないバグがあります。

調査してみたところ、どうやら
window.close()の使い方がマズイのではなく
iOS8のSafariが現時点でこの機能に対応していない旨のやり取りがされていました。

参考：
javascript – window.close() doesn't work on iOS 8 GM seed – Stack Overflow
（Appleのデベロッパーフォーラムは、アカウントがないと見られないので、とりあえずこちらへリンク）

今できる対応策は
同一ウィンドウ内での遷移で代用できるところは
バグ修正がアップデートされるまで、別窓遷移をやめることくらいでしょうか。

iOS 8.0は、他にも致命的なバグを見つけちゃってるので
2014年10月20日のiOS8.1アップデートで修正されてないか期待していたのですが
残念ながらほとんど直っていませんでした orz
たとえば、テキストボックス関連でこんなバグがあります。

“iOS8でwindow.close()が効かないバグ (8.1.1で修正済)” の続きを読む

投稿日:

iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない

<a href="http://demos seroquel 50 mg.jquerymobile.com/1.4.3/panel/”>jQuery mobileのPanelのpushのよう
本文が横スライドしてメニューがせり出してくるナビがついたウェブサイトに
スクロールに追従して画面の下へ固定表示するボタンを追加しようとしたら…
iPhoneで全く追従してくれない。

iPhoneやChromeでiposition: fixed; が効いてくれない場合は
-webkit-transform: translate… を併せて設定しているか親要素に設定していないか確認してみてください。

“iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない” の続きを読む

投稿日:

iPad向けにjQueryUIのカレンダーDatepickerを設定

iPadで、jQueryUIのDatepickerを使ったカレンダー選択式の
日付選択フォームを実装したときのポイントをまとめてみました。

ipad-jqueryui-datepicker

Datepickerをそのまま適用すると、パソコン向け仕様のままなのでこうなります。

  • 日付が小さくて押しにくい
  • カレンダーが開くとキーボードも開いて画面が狭くなる
  • 入力欄が端のほうにあるとカレンダーが画面外に見切れる

これらをタッチデバイス向けに改良しつつ
クライアントワークなので、オリジナルデザインで実装しました。

  1. jQueryUIをダウンロード
  2. カレンダー表示を日本語化
  3. CSSの適用
  4. フォーカスした時iPadのキーボードが開かないようinputにreadonlyを設定
  5. 初期値で今日の日付を設定
  6. 入力キャンセルのための「閉じる」ボタンと、月を移動した状態から今月へ戻る「今日」ボタン追加

サンプルソース

案件で実装した際はこの他に
inputを選んだ時はで日付のキーボード直接入力とし
input横のカレンダーボタンを選んだ場合だけカレンダー入力できるようにする改造もあったのですが
この対応ではライブラリの jquery-ui-1.10.4.custom.js を直接編集しており
複雑になってくるので、今回は割愛します。

“iPad向けにjQueryUIのカレンダーDatepickerを設定” の続きを読む

投稿日:

iPhone内蔵フォントをfont-familyで指定する

CSSのfont-familyで指定するとき、軽くつまずくのがフォント名の綴り…
よく使う、ヒラギノ角ゴ やメイリオは、前に設定した時のをコピーしてくればいいですが
iPhoneやiPadの内蔵フォントを使うとなると、使えるフォントとfont-familyで指定する綴りをどうやって調べたらよいのか。

“iPhone内蔵フォントをfont-familyで指定する” の続きを読む

投稿日:

viewportでパソコン用のウェブサイトをiPad対応

iPadを回転させても画面にフィットさせる

PC用のウェブサイトをiPadでタテ表示にしたときも横表示にしたときも画面内に収める方法。
このメタタグでviewportのwidthを1024に固定するとちょうど良く調整できます。

<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=0">

initial-scaleで初期倍率を指定した状態だと、回転させた時スクロールが出たり、縮小し過ぎたりとハマったので
最初からinitial-scaleは省いておくのがポイント。

もちろん、元になるウェブサイトの幅が1024px以内に収まっているのが大前提です。