Member Avatar for Awilson089

I am creating a responsive design for the first time, i have all the media queries in and i am linking to a separate mobile style sheet, i have been using this for testing the site, Click Here and it shows up fine on the iphone and smaller Smartphone test. You can use this link if you want to test it.

My problem is that when i try to look at it on a real iphone (my iphone 2g) it just doesn’t display, and when i tried to look at it on my small screen Samsung galaxy in opera mini, there is this really weird effect where it displays the mobile version but the page is really zoomed out and it jumps from the mobile version to the normal site really quickly over and over again.

The problem may lie in the media queries or the Meta viewport tag in the head, I’m just not sure why.
Thanks in advance,
Adam

  • 2 Contributors
  • 3 Replies
  • 284 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

's symptoms — fine in desktop emulators but failing on a real iPhone 2G, and odd zoom/jumping in Opera Mini — point to a small set of common causes: missing or incorrect viewport metadata, one or more fixed-width elements forcing the browser to scale, JavaScript or server-side logic switching styles, or browser-specific limitations (Opera Mini uses server-side rendering and often ignores standard responsive cues). 's idea of stacking elements is helpful, but a focused checklist and a couple of small defensive rules will usually fix this.

Ensure a single viewport meta is present in the <head> and formatted for a fluid layout. Place it near the top of the head (before heavy scripts) and avoid duplicate viewport tags:

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

Avoid disabling user zoom permanently (e.g., user-scalable=no) except for short tests — that harms accessibility.

Make layout and media truly fluid so the browser never needs to zoom to fit content. Two minimal CSS rules that often eliminate the “zoomed out / toggle” behavior:

/* fluid media and container */
img, video, iframe { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 980px; margin: 0 auto; box-sizing: border-box; }

/* example responsive breakpoint (use width-based queries rather than device-width) */
@media (max-width: 480px) {
  .sidebar { display: none; }
  .main   { width: 100%; }
}

Practical troubleshooting checklist:

  1. Verify the mobile stylesheet actually fires by adding a loud rule inside the mobile query (e.g., a temporary background color).
  2. Search CSS for fixed pixel widths (e.g., width: 980px or large min-width) and replace with %/max-width.
  3. Temporarily disable JS to rule out UA-based switching or redirects.
  4. Remember Opera Mini is not a reliable responsive tester (it SSRs pages); test in the device’s native browser or Chrome/Safari device emulation.
  5. Use remote Web Inspector or a simple isolated test page to inspect computed viewport and applied rules.

In practice the fix is almost always: add the correct viewport meta, remove or fluidify fixed-width elements, and confirm the mobile media query is actually applied on the device.

Recommended Answers

All 3 Replies

Member Avatar for dany12

do you use the css3 media query to target a device?

` like for iphone:

only screen and (min-device-width: 480px){}
like for tablet

only screen and (min-device-width: 768px){}
Member Avatar for Awilson089

Yeh i am :) take a look at the CSS in source view?

Member Avatar for dany12

Sorry for the long time I had some work but now I can explain to you the basis here it goes
1.When you design for mobile or ipad you will have to acomodate your design in that windows to do this try to float all your elements to the left and stacke them or you can remove unecessary elements form your design in mobile mode.

2.Nested divs with clases will also help you manage all your design

3,Use external js files don't wrote inline code it will be much easier to manage this goes also for css

4.Plugins can act strangelly when you minimize your design you are better offf with learning a jquery slideshow

5.Try to learn and teach others this is the way it should be have fun

If you have any question just ask

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.