響應式設計在桌面上運行，但不是iphone

我爲WordPress使用免費主題。我已經定製了設計以滿足我的需求，但是當我使用我的iPhone或iPad打開網站時，設計存在問題。我已經嘗試了我所知道的一切。有人能幫我找出這個問題的根源嗎？ [鏈接我的網站。] [1]響應式設計在桌面上運行，但不是iphone

來源

2016-04-25 Eman

通過的問題，我指的是大空空間的標題和導航欄之前顯示。 – Eman

試用iPhone 6/6 Plus和Apple關注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分鐘設備像素比：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) 
    { }

Apple Watch

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

圖像響應

img { 

    max-width: 100%; 
    }

來源

2016-04-25 07:30:11

謝謝。當我使用諸如[http://quirktools.com/screenfly/]之類的工具查看iPhone視圖時，iPhone視圖看起來非常好，但仍然無法在真正的iPhone視圖中使用。對於一個好的模擬器有什麼建議嗎？ – Eman

你應該確保所有的圖像也是響應式的。爲圖像響應kindly檢查上述帖子結束。 –

如果您在滑塊內使用動態文本，則必須製作響應滑塊圖像並縮小字體大小。 –

是否使用了應答meta標籤？

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

來源

2016-05-04 05:40:53 highFlyingDodo

響應式設計在桌面上運行，但不是iphone

回答

相關問題