Question

我正在使用WordPress的免费主题。我已经定制了设计以满足我的需求，但是当我使用iPhone或iPad打开网站时，设计存在问题。我已经尝试了我所知道的一切。有人可以帮我确定这个问题的根源吗？ [我的网站链接。] [1]

Answer 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 Plus

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

Apple Watch

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

对于图像响应

img {

   max-width: 100%;
  }

Answer 2

您使用的是响应式元标记吗？

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

响应式设计适用于台式机，但不适用于iphone

2 个答案: