毎回タイトル長いな…。
でも、私にとって大切なことなのでもう一度。

どんな現象か

1. それはAndroidではなく、iPhoneのSafariで起こる。
2. 対象は、fixedで固定してある要素で、クリックなどでイベントが発火する物である。（例えばヘッダのハンバーガーメニューとか、フッタ付近の何かのメニューとか）
3. 最下部までスクロールしてあり、下からタブバー（メニューバー？）がひょこっと出てきた・もしくは出てくる直前の状態が鬼門。
4. タブバー出現に備えて？画面領域が再計算され、クリックできるはずの領域がタブバーの高さ分だけ上部にズレてしまう不思議。
5. よって、フッター付近の固定要素ならタップすべきはその直前の亜空間となり、ヘッダーなどで最上部に固定してある場合は、タップすべき場所は画面外となる。

スマホのメニューってドロワーかトグルで大抵右上固定なんで、メニュー押せないとか普通に困ります。
ささっとcssとかソースとか見たんですが、これといった問題も見つけれなかったので、急場凌ぎでscriptとかも書いてみました。
フッターにpadding-bottomを60pxくらいあてといて、scriptでスクロール量を取って、copyright表示部分まで来たら、下部から60px分スクロールとかするように。
が、今度はタイミングによってはバウンスが起こるので、scriptが走って走って、画面がブレブレにw
バウンスをどうこうするよりも、scriptを改修するよりも、大元を突き止めたほうが幸せになれるので、がんばって原因を探ることにしました。

犯人はviewport！

私の書くcssがそんなに悪いのか！？と思って、色々いろいろ試してみました。
よく見る　transform: translate3d(0,0,0);　とか、divで囲ってうんたらかんたらとかも試しましたが駄目でした。
ただ、同じようなことしてあっても、そんな現象起きてないサイトもたくさんあるわけです。何かが決定的に違うわけです。

で、まさかと思って変更してみたviewportがビンゴでした。

ダメなviewportの書き方

<meta name="viewport" content="width=320">
<meta name="viewport" content="width=320, initial-scale=1">
<!-- どっちもダメ -->

大丈夫なviewportの書き方

<meta name="viewport" content="width=device-width, initial-scale=1">

要は、すべて端末に委ねなさい、っていうことですね。
外の人と話し合って、今後のレスポンシブのデザイン規定を変更することにしました。
まさに紆余曲折五里霧中状態でしたが、これでほっと一安心です。

ちなみに、↓が本家本元Appleのviewport指定です。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Appleと一緒なら怖くないので、今後はこれを採用ですね。
ちなみに、 viewport-fit=cover” は、iPhoneXの両端の白いバーを表示しないようにする設定です。
全世界で絶大なる不評を得たダサいあの領域が、存在を主張するわけですね。
だからいっそのこと消してしまえと。わかります。

……って、あれ？あれれれれ？？
Apple…おまえさん……。

久しぶりにIEです。
backgroundにまとめて書くと、IE10と11では背景画像もグラデもでません。
edgeなら問題ないんですけどねぇ。

  /* 何も出てこない */
    background: url("背景画像") center top no-repeat,-webkit-linear-gradient(top, #色, #色々 ),linear-gradient(to bottom,#色, #色々);

なので、面倒ですが、下のように書かないといけません。
この時、背景画像を先に記述することが大切です。

  /* 面倒でも分ける */
    background-color: #背景色;
    background-image: url("背景画像"), -webkit-linear-gradient(top,#色, #色々);
    background-image: url("背景画像"),linear-gradient(to bottom,#色, #色々);
    background-position: center top;
    background-repeat: no-repeat;

いつまで上のようなことしないといけないのかなーと気になったのでちょっと調べてみました。
引用中の表が2016年1月時点でのWindowsのIEサポート状況です。

マイナビニュース：IE10、IE9、IE8のサポート終了

2016年1月のアップデートの段階で、次のオペレーティングシステムおよびInternet Explorerがサポートされている。

オペレーティングシステム	2016年1月のアップデートでサポートされているIE
Windows Vista SP2	Internet Explorer 9
Windows Server 2008 SP2	Internet Explorer 9
Windows 7 SP1	Internet Explorer 11
Windows Server 2008 R2 SP1	Internet Explorer 11
Windows Server 2012	Internet Explorer 10
Windows 8.1	Internet Explorer 11
Windows Server 2012 R2	Internet Explorer 11
Windows 10	Internet Explorer 11
Windows Server 2016 Preview	Internet Explorer 11

Microsoftはこれまでのように1つのOSで複数のバージョンのInternet Explorerをサポートするというポリシーから、それぞれのWindowsで最新版のInternet Explorerのみをサポートするように方針を変更。サポートが終了したInternet Explorerを使い続けると、攻撃を受けるなどセキュリティ上の問題が懸念されるため、サポートが提供されている最新版へアップデートするか、またはセキュリティサポートが提供されている他のWebブラウザへ移行することが推奨される。

『それぞれのWindowsで最新版のInternet Explorerのみをサポート』っていうことですので、WindowsのIEサポート状況と、OSのサポート状況をあわせて表にしてみました。

Vistaはあと一か月足らずで延長サポート切れます。さよならVista。
サーバOSをどう考えるかによりますが、クライアントOSでの閲覧者が大半を占めるはずですので、基本的にIE11以降対応で組んだので問題なさそうですね。

それにしても、IE11は息が長そうや……！

通常トランスビットでGoogleMapを設置する際には、アナリティクスが使えることもあって、お客様専用Googleアカウントをとった後、APIキー使って設置することが多いです。
今回も、そのAPIキーで設置してるものについてのことです。

scriptでピン（マーカー）をきちんと設定したはずなのに、なぜか表示されない。
オリジナルの画像を使ったわけでもないし、設定はあっているからデフォのピンは読み込まれているはず……cssがコンフリクトしているに違いない！

で、探したらやっぱりコンフリクトしている所がありました。見つかってよかった(=_=;

レスポンシブなサイトの場合、AndroidのデフォルトブラウザとAndroidのchrome、要するにAndroidのために、コンテンツ幅が勝手に縮小されたりフォントサイズが勝手に大きくなったりする現象を抑えるためのcssを書いています。
↓うちではこんな感じ。

p,dt,dd,li,div{
background-image: url('../img/android_bug.png'); // 透過pngで幅対策
max-height: 100%; // フォントサイズ対策
}

この、divについたフォントサイズ対策のmax-heightが犯人でした。
なので、↓のようにmax-heightをなくしてやります。※GoogleMap用のidは適当。

#googlemap{
max-height: none;
}

これで無事、いつもの赤いマーカーが表示されました。
やれやれだぜ。

ちょっとだけ題名を変えて、前回結論が出たやつを書いてみました。
やりたいことは↓です。

1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
2. urlに対応するページタイトルを設定しておき、titleタグに書き加える。

function get_pagetitle(){

// 現在のurlを取得
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$domain = 'http://●●●●●/';
$pagetitle; // 入れ物

// 配列に、urlとページタイトルを入れておく
$pages = array (
  array ( 'href' => $domain.'cat.php', 'text' => '猫派' ),
  array ( 'href' => $domain.'dog.php', 'text' => '犬派' ),
  array ( 'href' => $domain.'bird.php', 'text' => '鳥派' )
);

// 配列の中で、現在のurlと対応するものを判別、その後、textを取得。
foreach($pages as $page){
  if($page['href'] == $url){
    $pagetitle = $page['text'];
  }
}
return $pagetitle;
}

これで、ページタイトルをゲットできるようになりました。
せっかくの配列なので、引数を設定したらfooter用のナビゲーションを書き出せるようにしてもいいかもです。

やりたいことは至って単純なんです。

1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
2. 各ページには、見出しタグh2でページタイトルがついている。
3. だから、それを取ってきてtitleタグに自動で書き加えたら楽な気がする！

jQueryなら簡単なんですが、titleをDOMで出すのは流石に良心が痛むので（SEO的に）、phpでやることにしてググってみました。

↓↓ 辿り着いたありがたいサイトを参考にしてみました。
PHPでWEBページのタイトルを抜き出すサンプル

function get_pagetitle(){
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; //当該ページ
$html = file_get_contents($url); //HTML取得
// ↓マルチバイトencode。今回はもとからutf-8なので不要。
// $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); 
if ( preg_match( "/<h2 class=\"page_title\">(.*?)<\/h2>/i", $html, $matches) ) {
    $pagetitle = $matches[1]; //h2を丸ごと取得
} else {
    return false;
}

return strip_tags($pagetitle); //タグを除いて、中身だけ返す
}

できたー！
できた……が、file_get_contentsを使わずに、現在のページを舐めることはできないの！？
そして、わかっていたけどpreg_matchの重さは異常！！
たった一つのタグを探し出すための仕掛けなのに……(TT

結論：ファイル名とタイトルの連想配列を作っといて、foreachするのが一番良いと思います。