Open ramaman opened 10 years ago
You resized the browser below 320px width. Responsivity does stop at breakpoint below 320px. Its an intended experience, also a common decision (even youtube do the same). Afterall, if the user browser width do below 320px, the resulting UI should not look like the screenshot you posted here.
It should be like this:
What happen here was because, the html <head>
didn't correctly written.
We missing these metas
<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I provided them (on each of html template i wrote), so the site could be mobile friendly
.
But i see none of them exist on the current site
If you curious this is what youtube do to tiny screen
I do the tests on mobile media. Using several user agents. And the tests passed like I expected. I guess this bug should not addressed to my side of code.
The screenshots i posted were taken from branch ux2 wikasa-frontend example, not from wikasa.com website. If common convention says that 320px is the lowest breakpoint, it should be ok for now
The meta tags seem to be the cause of missing functionality on wikasa.com site. Yes you are right, the bug is on our side, should be good after adding them.
I updated our ux2 branch of wikasa-frontend with the latest verson. However, there are two issues here:
1 - There are two pair of scrolls horizontally and vertically, this is taken directly from wikasa-frontend.:
This is caused by on /base/_element
, overflow:scroll is declared twice, I removed the overflow from html and everything turns out to be fine. Please confirm whether deleting this does not cause additional unintended error:
// ----------------------------------------------------------------------------\
// HTML.
// ----------------------------------------------------------------------------/
html {
font-size: 100%;
height: 100%;
min-width: 320px;
overflow: scroll;
}
// ----------------------------------------------------------------------------\
// Body.
// ----------------------------------------------------------------------------/
body {
display: block;
min-width: 320px;
overflow: scroll;
height: 100%;
color: $black;
font-family: $ff-sans-regular;
}
2 - The header looks fine, but search bar is missing
Again, this is taken directly from wikasa-frontend code, without any modification from our side.
About breakpoint lower than 320, youtube should not be a good example here as it has completely different version for mobile, that is why it looks like that. If you open youtube site from mobile device then it renders another interface. Therefore, I take bootstrap for a better example:
Here we see that even at 2xx pixels, the images are displayed correctly. However if 320px turns out to be the smallest for most devices, this specific issue is not a priority at the moment. The two issues mentioned on my previous comment should be the focus.
Lets leave this thread for issue #1, issue #2 should be part of https://github.com/Qometlabs/wikasa-frontend/issues/27