スマートフォン対応時の小技メモ at 2015.11
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%;が効かなくて焦った。」