2

私はレスポンシブな Wordpress サイト ( http://www.allisoncassels.com/Test/ ) の開発に取り組んでおり、メディア クエリに問題があります。

次のブレークポイントの CSS をコーディングしました。

/* Portrait Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) 

/*  Portrait Mobiles */
@media only screen and (max-width: 767px) 

/* Landscape Mobiles */
@media only screen and (min-width: 480px) and (max-width: 767px)

デスクトップでは、すべてが見栄えがします。私の携帯電話とタブレットでは、いくつかのものはモバイルであり、いくつかのものはまだデスクトップのように表示されています (私が持っているもの: 何も表示されていない、div 幅がオフになっているなど)。

私が理解できる唯一のことは、それが私の電話/タブレットがRetinaディスプレイであることに関連しているということですが、他のサイトがそれを計算に織り込む必要があるとは思いません...

今は本当に困惑しています。助けていただければ幸いです。ありがとう

4

5 に答える 5

2

これ頭に入れて！！！:P

メタタグの内側。

name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1" />

乾杯、マーク

于 2013-05-02T01:20:54.837 に答える
1

このメタを追加する必要があります

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

iPhone 6/6 Plus および Apple Watch の CSSメディアクエリについては、このメディア クエリを試してください。

@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (orientation: landscape)
 and (-webkit-min-device-pixel-ratio: 2)
 { }

iPhone 6 のポートレート

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }

iPhone 6 Plus 横向き

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }

iPhone 6 Plus のポートレート

 @media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait)

および (-webkit-min-device-pixel-ratio: 3) { }

iPhone 6 および 6 プラス 

  @media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
   { }

アップルウォッチ

  @media
  (max-device-width: 42mm)
   and (min-device-width: 38mm)
  { }

画像レスポンシブの場合

img {

   max-width: 100%;
  }
于 2016-04-26T05:08:33.180 に答える
0

アップデート

昨夜の作業中にウェブホストのサーバーがクラッシュし、適切に伝播されているファイルに影響を与えていたと思います...すべてのレスポンシブコードは今日完全に機能します.

于 2013-04-11T19:22:48.070 に答える
0

この wordpress テーマの Avando はすでにレスポンシブです。

http://themefurnace.com/themes/?theme=Avando

追加のcssを作成する必要はありません

于 2013-04-11T08:39:23.710 に答える