うのらぼ。 - HTML Archive

【iPhone】iOS5で追加になったもろもろ

ここ見ながらまとめてる http://jsdo.it/GeckoTang/8ldM

position: fixed;の実装
overflow: scroll/auto;~~に対応~~が1本指でスクロールするようになった
- -webkit-overflow-scrolling: touch;を指定するとスクロールバーを出せる(ネイティブなスクロールになる)
- バーが出てた方が動きが滑らか

position:fixed;な要素と-webkit-overflow-scrollinを指定している要素が重なった時、z-indexを指定していないとおかしな挙動をする。 z-indexが指定してあれば問題ない模様。

あとは日時に関する入力タイプ(<input type=”datetime”>など)でドラムが出るようになった。

などなど。 valueに値が無いと空っぽ表示→クリックすると現在時刻。

<input type=”range”>がスライダー表示になった。 -webkit-appearance: slider-vertical;で縦スライダー。 ::-webkit-slider-thumbで動かすアレのスタイル指定。

あとはプライベートブラウジングのときのこれ iOS5で追加されるPrivate BrowsingモードとWebStorageの兼ね合い ::ハブろぐはやっぱりそうなっていた。 try～catchで回避可能。

一昔前のサイトにはよくあった、メーラーを立ち上げるリンク

<a href="mailto:hogehoge@hoge.ne.jp">お問い合わせ</a>

ですが、久々に使う機会がありました。このリンクを叩いてメーラーが起動した際に、「件名」や「本文」を入れたい、とのことでした。

とりあえず一般的な方法としては、

<a href="mailto:hogehoge@hoge.ne.jp?subject=件名&amp;body=本文">お問い合わせ</a>

とするのですが、これがなかなか厄介なようです。環境によっては記入される「件名」や「本文」が文字化けするようです。

そこで、タイトルの通り検証を行ってみました。何故 Outlook と Thunderbird なのかは、たまたま手元にあったからです。

前置きはいいからできんの？できないの？って言う人もいると思うので結論から書いてしまうと、

一つのリンク(一つの<a>タグ)で Outlook、Thunderbird 共に共通の表示をさせる(文字化けさせない)ことは現状不可能

と考えられます。

つまり、どちらも文字化けさせないためにはお問い合わせ (文字化けする方はこちら) のようにリンクを二つに分けなければいけないわけです。 (ただし、今回は上記のとおり Outlook と Thunderbird でしか検証を行っていないため、メーラーによってはリンクがもっと増える可能性はあります。)

で、検証した内容とかは下記。

まさかのミスだったので自分用メモ

IE7向けにCSS書いてるはずが何かおかしい、ていうかIE6と同じレンダリングになってる！って場合 IE7が後方互換モードになってます。

こんなとき

そういうときは DOCTYPE宣言をみて、

後方互換モード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />

標準準拠モード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

古いコードのリニューアル作業のときは注意しよう…。

あとついでに、IE8のレンダリングモード指定のメタタグもメモ

<meta http-equiv="X-UA-Compatible" content="IE=7" />