Jump to content

The CSS @media Rule and Safari's Responsive Design Option Panel


iwato

Recommended Posts

is there a better online resource to test responsive design modeling than the Safari browser's RD option? 

Link to comment
Share on other sites

Hi, Ingolme!

In answer to your question:  what appears in the tool does not appear in my iPhone.

You can try it on your phone and browser, if you like.  Here is the link.

You will probably receive a fairly accurate rendering in your computer's browser viewport, as both Safari and Firefox render identical images for me.  This is not what is viewed in my iPhone 4SE , though -- this, despite its appearing the same in the Safari emulator.

Roddy

Edited by iwato
Link to comment
Share on other sites

Can you describe what's different in your iPhone? I don't have an iPhone to test on. Phone screen sizes may vary. Common sizes are 375px and 320px. When I'm emulating phones I put those widths in the responsive design tool for testing.

Link to comment
Share on other sites

The text overlaps.  What should appear in the footer separate and distinct from the main content appears in the main content.  Rather than shrinking proportionally as appears in the Safari emulator, or expanding in scrolled overflow as in the Firefox emulator, the device browser tries to fit everything in the same viewport with no adjustment for size or proportionment.

The proportional distances that I use for the CSS top and bottom properties appear to work fine in the emulator.  Unfortunately,  they appear to fail in the device itself. I tried the Firefox emulator at your suggestion, but it produced a rendering different from that produced by the Safari emulator.  The worst of it, however, is that both emulators produce something different from what I see in my device.

I now have three versions only one of which appears as it should and does in a normal browser environment on my iMac.

Roddy

 

Link to comment
Share on other sites

In Firefox at 375px wide the green text overlaps the black text.

For the most flexible and consistent layouts I would suggest not using absolute or fixed positioning.

Link to comment
Share on other sites

Ingolme:  The absolute positioning is necessary -- unless you can show me a better method --  to insure that the height of the background element maintains a consistent portion to its responsive width.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...