カテゴリー: iPhone

レスポンシブサイトで遭遇するフォントサイズのバグまとめ

remを使っている時、chromeでだけフォントサイズがおかしい

bodyに対してだけem指定する。

body {
  font-size: 1.6em;
}

もしくはjs

$(function(){
    //chrome用の分岐処理
    var _ua = (function(){
     return {
        Blink:window.chrome
     }
    })();
     
    if(_ua.Blink){
        //chromeの文字サイズ対策
        document.body.style.webkitTransform = "scale(1)";
    }
});

参考サイト様

http://qiita.com/qtach1/items/2a48aa64dbcd820b7d76

textareaのフォントサイズがchromeでだけおかしい

フォントファミリーを指定してあげると治るようです。

textarea{
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

参考サイト様

http://qiita.com/qtach1/items/c28df7c65ccf8cc35540

Android4系でpタグが変な位置で折り返される

pタグに背景色か背景画像を指定してあげる。

p{
	background-image: url(../img/s.gif);
}

参考サイト様

http://count0.org/2013/10/03/android-viewport-width-trap.html

Androidのchromeで文字サイズが大きくなる

こちらのように、viewportが固定の時に生じる現象らしい

<meta name="viewport" content="width=760" />

該当する要素に

.section1 p{ max-height: 100%; }

などとしてあげると治る。
ただしリセットcssなどに書いておいても効かなかったので注意が必要！

参考サイト様

http://www.seomode.jp/html-css/2014/06/25/3339/

iOSで文字サイズが変になる

* { -webkit-text-size-adjust: 100%; }

参考サイト様

http://ultimate-ez.com/2014/03/29/3572/

スマートフォンでテキストエリアをフォーカスしたら中身を選択済みにする

こういうの、PCではあるけどスマホでは見当たらない。
http://tmlife.net/programming/javascript/textarea-all-select.html

と思ったら、ソーシャルゲームの友達募集ページでは実装されてた。
http://pazudora-friend.com/che/

<input type="text" name="fbshare" onfocus="this.selectionStart=0; this.selectionEnd=this.value.length;" onmouseup="return false" value="自動で選択できます。">

動作確認結果

機種によって不安定なので、その旨クライアントさんに伝える必要あり。

■選択できたりできなかったり
iOS8.4safari

■選択されない（普通に選択はできる）
Android4.2 標準ブラウザ

■使いやすい
Android4.2 Chrome

スマートフォン用にアニメーションをjQueryとcss3で作ったので便利だったページをメモ

PCサイト用のFlashをスマートフォン用にjQueryとcss3で書きなおしました。
便利だったページをメモします。

基本機能を確認

jQueryの日本語リファレンス
http://js.studio-kingdom.com/

jQueryのイージングプラグインの動きまとめ
http://easings.net/ja

CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）
http://www.flapism.jp/html/416/

ベンダープレフィックスの扱い

ベンダープレフィックスの整理整頓
https://w3g.jp/blog/vendor_prefix_cleaning

ベンダープレフィックスの順序
http://kojika17.com/2013/02/ordering-vender-prefix.html

Androidの限界

@keyframesとAndroid（CSS3のアニメーションのバグのまとめ）
http://blog.webcreativepark.net/2012/02/12-141313.html

Android2.3ではCSS3でイージングは使えないみたい。
回転軸の指定とかも難しいかも。
あと、Android2.3ではメモリの限界？で、同一画面内で複数箇所以上アニメーションさせると動かなくなりました。
どの要素をアニメーションさせるか取捨選択は必要ですね。

上下中央揃えcss（IE9以上）

ストレッチもできるっぽい。
Android2.3
iOS7 safari chrome
にて、動作確認済み。

<div class="demo">
<p>天地の中央に配置</p>
</div>

.demo p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

参考
[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）

webkit系のborder-radiusバグのメモ

webkit系でborder-radiusプロパティを使いスライドをした場合バグる。
http://webpad.felicyle.com/coding/webkit-border-radius/

webkit border-radiusとposition absoluteを組み合わせると不具合
http://hai3.net/blog/2012/07/31/webkit-border-radius%E3%81%A8position-absolute%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B%E3%81%A8%E4%B8%8D%E5%85%B7%E5%90%88/

percentage値は
・古い Chrome と Safariでサポートされていません（2010 年 9月に修正されました）
・Opera 11.50 以前ではバグがあります
・Gecko 2.0 (Firefox 4) 以前では非標準な方法で実装されています。縦横どちらの半径も、ボーダーボックスの幅に関係していました。
・古い iOS (5 以前) と Android (WebKit 532 以前)ではサポートされていません
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

う～ん。なんということだろう。
アニメーションしたりするとハマるよね。
初めから対応機種ほうがいいかもね。
情報提供していただいた上記サイトに感謝です。

【SP限定】border-imageでいろんなワクをつくろう。

PCでは対応状況が悪いので使い物にならないが、
スマホでのコーディングでは有力かもしれない。
アンドロイドでの、特殊枠画像で、画像がずれたりしないのだ！！

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

div{
	border-style: solid;
	border-width: 30px 25px 20px 25px;
	-moz-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-webkit-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-o-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	border-image: url(../img/bg_form.png) 30 25 20 25 fill stretch round;
}

下記の解説とジェネレータが秀逸。

http://www.htmq.com/css3/border-image.shtml
http://border-image.com/

ユーザーエージェントによって読み込むcssとスクリプトを変更する。

iOSとそれ以外で分岐さす例。
納期直前にバグが出ても、ある程度はリカバリできるかも（厭だけど。）

<script type="text/javascript">
	useragentcheck();
	function useragentcheck(){
		var agent = navigator.userAgent;
		if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1){
			require('js/custom.js');
		}else{
			loadingcss('css/noios.css');
			require('js/customnoios.js');
		}
	}

	function require(src){
		var element=document.createElement('script');
		element.type='text/javascript';
		element.src=src;
		document.getElementsByTagName('head')[0].appendChild(element);
	}

	function loadingcss(href){
		var element=document.createElement('link');
		element.rel='stylesheet';
		element.href=href;
		document.getElementsByTagName('head')[0].appendChild(element);
	}
</script>

パソコンサイトからスマホサイトへの導線３

今度はキャッシュなしバージョン
こちらを参考にして書き換えました。

http://zuboraism.com/javascript/28.html

<script type="text/javascript">
useragentcheck();
function useragentcheck(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1 || agent.search(/Windows Phone/) != -1 || agent.search(/Symbian/) != -1 || agent.			search(/BlackBerry/) != -1 ){
	redirect();
	}
}
function redirect(){
	if(confirm('スマートフォン版ではお手持ちのスマートフォン内のアルバムやInstagramからアップロードしてTシャツを作成出来ます。スマートフォン用サイトを開きますか？')){
location.href = '/sp/';}
}
</script>

伸縮する画像をスマホで表示

画像を16個並べた状態で、綺麗に伸縮するソースを書くのに手こずったのでメモメモ。
結局tableが一番美しいな。あんまりレイアウトに使うの良くないのだけど。
cssのdisplay:tableうんちゃら;でもいいのかもしれないが、html5のブロック要素まわりの改変がまだよくわからないので、避けておいている。


		<div class="div_Wrap clearfix">
			<table id="photoAllWrap" cellpadding="0" cellspacing="0">
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
			</table>
		</div>

#mainWrap .div_Wrap {
	width:94%;
	max-width:600px;
	margin:auto auto 30px auto;
}

#mainWrap #photoAllWrap {
	width:94%;
	margin:auto auto auto;
}

#mainWrap #photoAllWrap tr td{
	width:25%;
	padding:2px;
	background-color:#ffffff;
}

#mainWrap #photoAllWrap img {
	width:100%;
	border:2px #999999 solid;
}

スマホで dl dt dd を横並びに

スマートフォンではこれでOKなことを確認しています。
PCでは、古いブラウザでバグる、かも。

#allWrap{
	width:100%;
	background:#ffffff;
}

#allWrap dl{
	width:88.4%;
	font-size:77%;
	padding:10px 0 20px;
	margin:auto;
}

#allWrap dl dt{
	float:left;
	width:15%;/*dlに入れたい文字全体の横幅　em指定でもいいかもしれない*/
	padding:0;
	clear:both;
	font-weight:bold;/*お好みで*/
}

#allWrap dl dd{
	margin-left:15%;/*dlに入れたい文字全体の横幅　em指定でもいいかもしれない*/
	padding:0 0 5px 10%;
	width:85%;/*全体の横幅から、dlとpaddingの値を足した値を引いたもの*/	
}