This is how the default Spark front page looks in an iPhone simulator. What's up with this?

iOS Simulator.png

Members fund testing for the Drupal project. Drupal Association Learn more


Gábor Hojtsy’s picture

I guess the question is what is the simulated resolution. See that is why pixels vs. devices is a wrong correlation as people mentioned elsewhere. We have a 320px breakpoint which is the iPhone's original screen size. If you are simulating a retina iPhone, the pixel size would be different. It might also happen that our breakpoint for 320px is not kicking in (we use @media screen and (min-width:0px) and (max-width:320px)) however it sounds more likely this is a case of retina vs. non-retina, which is where the breakpoints module (from @attiks shines compared to our simplistic solution).

attiks’s picture

this should work @media screen and (min-width: 0px) and (max-width: 320px) the space is behind the : is needed on most devices, see also #1799700: Missing space in breakpoint

webchick’s picture

I have OS X Snow Leopard, so I'm quite sure it's not a retina display or anything fancy like that. It's iOS 4.3. I'm not sure how to tell what the dimensions are of the simulator.

big_smile’s picture

In the simulator, you can pick if the hardware is retina or not retina (under hardware > Device).

If you are not using a Mac Book Pro with Retina display, the retina iPhone in the simulator will be twice the size of the non-retina iPhone.

If you are using a Mac Book Pro with Retina display, than the simulator will not double the size of the retina iPhone.

Also, I think most Drupal form fields have a hardcoded size (e.g. size=15"), which prevents the form field from shrinking past that size.

jessebeach’s picture

After looking at this issue a bit and trying attiks suggestion (I wish it had been the case), the issue seems to be deeper. The original Layout application isn't declaring breakpoint values correctly. I'm remembering now that we ran into this right before the Munich BOFs. Fixing this issue will require some heavy-lifting, but we've also now got a more sophisticated understanding of breakpoints and steps thanks to the work attiks and Gábor have done.

attiks’s picture

Jesse can I test this with the latest gridbuilder/layout combo?

Gábor Hojtsy’s picture

Also, Jesse: can you elaborate on what is missing? Your remarks are quite vague to me.

g76’s picture

first off, thank you! the Spark distribution is incredible! just wanted to report I am having the same issue with latest spark dev - fresh install. screenshots attached. It only is an issue on the home page, not the about us page, difference being a full panels layout(home) versus standard page with blocks(about us).

Gábor Hojtsy’s picture

Late in the Drupal 7 development cycle for the responsive builder, the lowest breakpoint (smartphone) was changed to be on 0px, and the designer itself takes on the next breakpoints for each one to represent the points. This is not how the breakpoints are actually configured but that is how the layout designer understands them:
(it represents infinity with a number relatively larger then the last defined breakpoint, that should technically be positive infinity).

The breakpoint based CSS generator was not updated to this, so what happens is it takes 0px as the smartphone breakpoint and generates a max-width: 0px media query, which obviously will never apply. So the mobile layout will never be active. Then the next (tablet) layout gets applied in between 0 and 320px and the standard layout gets applied above 320px. It is hardly possible to resize a browser window under 320px width, so in essense it is impossible to showcase the responsivity of the solution.

I'm looking into making it so it applies the breakpoints on the server side as well shifted by one.

Gábor Hojtsy’s picture

Status: Active » Fixed
2.99 KB

Here is a solution for processing the breakpoints first and building a data array out of them so we can go back and apply max-width to prior breakpoints from later breakpoints. It fixes the issue in my testing but obviously the 320px breakpoint is still hard to demo on a desktop computer. You can make the tablet breakpoint larger than 320px (eg. 540px) for better demonstration on a desktop. Of course adjust the breakpoints as needed.

Committed as

I believe this should fix the issue. Please reopen if still encountering issues.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes