首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >响应式设计适用于台式机但不适用于iphone

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

Stack Overflow用户
提问于 2016-04-25 15:16:40
回答 2查看 51关注 0票数 0

我正在为WordPress使用一个免费的主题。我已经定制了设计来满足我的需求,但当我使用我的iPhone或iPad打开网站时,设计出现了问题。我已经试过我知道的一切了。有人能帮我找出这个问题的根源吗?我的网站链接。

EN

回答 2

Stack Overflow用户

发布于 2016-04-25 15:30:12

针对iPhone 6/6Plus和苹果手表CSS媒体查询试用此媒体查询

代码语言:javascript
运行
复制
@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纵向

代码语言:javascript
运行
复制
@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+横向

代码语言:javascript
运行
复制
@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纵向

代码语言:javascript
运行
复制
 @media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait) 

和(-webkit-min-device-像素比: 3) {}

iPhone 6和6以及

代码语言:javascript
运行
复制
  @media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
   { }

苹果手表

代码语言:javascript
运行
复制
  @media
  (max-device-width: 42mm)
   and (min-device-width: 38mm)
  { }

对于图像响应式

代码语言:javascript
运行
复制
img {

   max-width: 100%;
  }
票数 1
EN

Stack Overflow用户

发布于 2016-05-04 13:40:53

你在使用响应式meta标签吗?

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36834174

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档