iPhone上でフォームボタンのCSSが反映されない

iPhoneでフォームのボタン類にCSSを設定しても、iOSデフォルトのスタイル（角丸&グラデーション）になってしまう件の対処方法。

.form_btn { -webkit-appearance: none; }

webkitのアピアランスをnoneにするだけです。

URLなど長い英単語などあると、改行されずに横にはみ出す

URLや長い英単語などが改行されずに、ボックスを突き出して、横幅を大きくしてしまいます。
すると横スライドもできてしまい、ユーザビリティ的にも問題が出てしまいます。

対処としては、word-wrap:break-wordをbody要素に適用します。

body {
overflow-wrap:break-word;
word-wrap:break-word;
}

また、個別なボックスでoverflow:scrollでスクロールを表示したい場合は、word-wrapはそのボックスだけ、nomalを指定しないと、スクロールなしに改行されてしまいます。

.contents_box {
overflow:scroll;
word-wrap:normal;
}

tableセルなどは、word-wrap:break-wordが効かない場合があります。
そういった場合には、table要素にtable-layout:fixedとして固定するか、word-break:break-allとして強制改行させるかの二つの方法があります。

table {
table-layout:fixed;
}

table {
word-break:break-all;
}

注意点としては、word-break:break-allでは、句読点やカンマなども行頭にくる可能性があるので、読みづらい文章になってしまうことがあります。

Android系でz-indexの挙動がおかしい場合のCSS対処方法

フッターなどposition:fixedで固定して、z-indexで上の方に表示するように設定しても、スクロール時に隠れてしまうケースの対処方法。

.footer { -webkit-transform: translate3d(0,0,0); }

iOSで、数字がすべてTELリンクになってしまう場合の対処法

iOSで数字が勝手にリンクになってしまう場合の対処方法です。
まずはhead内にmeta name=”format-detection”で数字を自動でリンクにする機能を無効にします。

<meta name="format-detection" content="telephone=no">

そして、電話番号でのリンクの場合は以下のように記述します。

<a href="tel:090xxxxyyyy">090-xxxx-yyyy</a>

viewportでwidthを数値で指定する場合にAndroid系でうまく行かない時のTips

少し前の記事ですが、Androidのバージョンや機種によって、viewportのwidthに数値（pxなど）を入れても設定されない時の対処方法をto-Rさんが公開しています。仕様によりviewportのwidthに数値（px）を入れるサイト制作で、横向きと縦向きの切り替えなどで問題がでた場合、試してみると良いと思います。

参照元続：Androidブラウザでviewportのwidth指定

var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
 if(Math.abs(window.orientation) === 0){
   if(/Android/.test(window.navigator.userAgent)){
     if(!portraitWidth)portraitWidth=$(window).width();
     }else{
         portraitWidth=$(window).width();
     }
  $("html").css("zoom" , portraitWidth/320 );
  }else{
   if(/Android/.test(window.navigator.userAgent)){
     if(!landscapeWidth)landscapeWidth=$(window).width();
     }else{
         landscapeWidth=$(window).width();
       }
     $("html").css("zoom" , landscapeWidth/320 );
   }
  }).trigger("resize");

横向きにすると文字サイズが大きくなってしまう場合の対処方法

body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust: 100%; }

<metaname="viewport"content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, user-scalable=yes">

こちらも昔から言われている方法です。
また、viewportでinitial-scaleかmaximum-scaleのどちらかを指定しないと-webkit-text-size-adjastが効かないので、要注意です。
（maximum-scaleの数値も5.0などにすると効かなくなる場合があるらしい）

参照元 : xxmiz0mblrxx　「-webkit-text-size-adjust: 100%;が効かなくて焦った。」