iwato Posted May 3, 2017 Share Posted May 3, 2017 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 More sharing options...
Ingolme Posted May 3, 2017 Share Posted May 3, 2017 Firefox and Chrome also have tools to emulate smaller devices. What's your issue with Safari's tool? Link to comment Share on other sites More sharing options...
iwato Posted May 3, 2017 Author Share Posted May 3, 2017 (edited) 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 May 3, 2017 by iwato Link to comment Share on other sites More sharing options...
Ingolme Posted May 3, 2017 Share Posted May 3, 2017 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 More sharing options...
iwato Posted May 3, 2017 Author Share Posted May 3, 2017 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 More sharing options...
Ingolme Posted May 3, 2017 Share Posted May 3, 2017 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 More sharing options...
iwato Posted May 3, 2017 Author Share Posted May 3, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now