Jump to content
iwato

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

Firefox and Chrome also have tools to emulate smaller devices. What's your issue with Safari's tool?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...