响应式设计适用于台式机但不适用于iphone
响应式设计适用于台式机但不适用于iphone
提问于 2016-04-25 15:16:40
我正在为WordPress使用一个免费的主题。我已经定制了设计来满足我的需求，但当我使用我的iPhone或iPad打开网站时，设计出现了问题。我已经试过我知道的一切了。有人能帮我找出这个问题的根源吗？我的网站链接。
回答 2
Stack Overflow用户
发布于 2016-04-25 15:30:12
针对iPhone 6/6Plus和苹果手表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+横向
@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-像素比: 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%;
}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">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36834174
复制相关文章
相似问题
腾讯云开发者
