CODEWITHSUNDEEP
iphonewordpressresponsive-designwordpress-themingresponsive
Eman
Eman

Reputation: 1

Responsive design works on desktop but not iphone

I am using a free theme for WordPress. I have customized the design to meet my needs, but there are problems with the design when i open the website using my iPhone or iPad. I have tried everything i know. Can someone help me identify the source of this problem? [Link of my website.][1]

Upvotes: 0

Views: 108

Answers (2)

highFlyingSmurfs
highFlyingSmurfs

Reputation: 3039

Are you using the responsive meta tag?

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

Upvotes: 0

naveenkumar.s
naveenkumar.s

Reputation: 991

Try this media query for iPhone 6/6 Plus and Apple Watch CSS media queries

@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 portrait

@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 landscape

@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 portrait

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

and (-webkit-min-device-pixel-ratio: 3) { }

iPhone 6 and 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)
  { }

For Image responsive

img {

   max-width: 100%;
  }

Upvotes: 1

Related Questions