zaKEY.net - WordPress・iPhoneなどのブログ -

コポキャラの岡崎邦彦(ザッキー)の情報サイト。WordPressやらEC CUBEやらiPhoneについての情報を書いていきます。

HTML・CSS

iPhone6・iPhone6 PlusのCSSハック

投稿日:

iPhone5までは幅320pxで調整出来ましたが、iPhone6・iPhone6 Plusになって幅が大きくなったためそのためのCSSを入れないといけません。
参考より、こちらで対応できます。

/* iPhone6のみ */
@media screen and (min-width: 375px) and (max-width: 413px){
}
 
/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media screen and (min-width: 414px) and (max-width: 500px){
}

参考サイト:iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ&解像度比較とメディアクエリー

zakey336x280

zakey336x280

-HTML・CSS
-,

関連記事

HTML5rawkes

【html5】スマホでPC用サイトを見せる時に幅が足りない時の対処法

PC用サイトをスマホで表示させる際にうまく表示させることが出来ず幅が足りない場合があります。 この場合下記のコードがheadに入っていないか確認してみてください。 <meta name=&quo …

CSS3

【css3】文字やボックスに影を付ける方法

css3を使えば文字やボックスに影を簡単に付けることができます。 通常はPhotoShopで影の加工をしてそれを使用しますが、cssでできるのであればサイトが自由に作れますし、更新の手間が省けます。 …

Sublime Textのautofilenameのwidthとheightが入らない。

Sublime Textのautofilenameのwidthとheightが入らない。

軽くて拡張しやすいので愛用しているSublime Textですが、先日からなぜかautofilenameのwidthとheightが入らない。 Sublime Textを使っている一番の理由がauto …

スクリーンショット 2014-03-06 10.40.10

【css3】inputタグに事前に薄く文字を表示させる方法

お問い合わせフォーム等で入力欄に事前に文字が入っているのを見たことありますか? あれが入っていると相手としては何を入力すればよいのかわかりやすいので、是非導入したい! HTML5だと実は簡単に導入でき …

CSS3

【CSS】URLや単語を途中で改行させる方法

長いURL等を貼り付けているとその単語分の幅がないと折り返してしまってうまく改行してくれません。 そんな場合はcssで対応しました。 対応したい要素に対して下記1行で対応できます。 word-brea …