I have an issue with this little project:
https://weather-thanos.netlify.app/
https://github.com/thanosoncode/weather-react
When I inspect project for mobile sizes in desktop I can see margins and flexbox gap that disappears when in mobile.
I have media queries of course and even with much less view size than my actual phone is, it looks great in inspect.
Any ideas why that might happen?
https://github.com/thanosoncode/weather-react/blob/main/Screenshot_20211117_133044_com.huawei.browser.jpg
https://github.com/thanosoncode/weather-react/blob/main/local.jpg
Related
I am constructing a responsive website, and have designed it to look correct for desktop view.
I am currently tweaking it now for responsive breakpoints/media queries.
Here's the problem that I would like guidance on:
From my understanding, I've seen people only use width for their break points. In which case I did the same thing and make it look good on all the width break points.
However, I happened to be testing using the google chrome developer tool and started selecting specific devices (iphone 5, iphone 6, iphone 6 plus, ipad, etc.)
And noticed something alarming, which was that the elements was getting pushed off the screen vertically at the top and bottom because each of these devices not only have different widths, but HEIGHTS as well.
So the perfectionist in my is thinking about setting a media query for both height and width for every major device, but I realize that this work, although can be done, might not be the most efficient, and I have not seen other tutorials do this.
My specific question is: if there is a more efficient way to developing a responsive site without having elements go off the screen vertically.
Added information: I have a div that contains an img, then a h1 below it, then a bootstrap row with col-sm-6
The img width is in px (I experimented with vh/vw and %, but that seemed to make it more difficult to control when it scaled)
You can not set media query for device height, You can set height only,
And do not depend only in google chrome developer tool because sometimes it will not response in proper way, so you have to test in actual device for batter view.
I've been developing a website on my local machine that has a fixed nav menu at the top. When a browser zooms in, I use media queries to compress the space between objects in the header so all objects fit on screen, and this works well on desktop.
However, I've noticed when testing on a mobile device (Android Galaxy S3) that these media queries are not triggered on pinch zoom, resulting in the icons expanding past the limits of the mobile viewport.
I can't find good documentation of this behavior online. I've seen it mentioned sporadically that this is designed behavior, and pinch zoom is like a 'magnifying glass' that should not activate media queries. I'm considering disabling the nav menu on mobile entirely. Is there a native way to deal with this problem, or will this require a javascript solution?
Here are two pictures. The first is the nav menu at no zoom, the second is the nav menu pinch zoomed on a mobile device.
Below are the two media queries I'm currently using. Note that I am using the meta viewport tag to set the content width as well; I can't think of anything else that might influence this behavior.
#media screen and (max-width: 74em){...}
#media screen and (max-width: 47em){...}
I have tried px measurements as well.
Let me know if any more information is required. Thank you for your help.
I was oscillating between fixing the viewport to the device width and fixing it to an absolute width, as well as testing between browsers. Setting the meta viewport tag to device-width works on some browsers, but not all, and it appears mobile has historically poor support for fixed headers. I ultimately opted to simply disable the header on certain devices; I think any other solution would demand using javascript and probably yield a pretty poor performance on mobile devices.
As well, setting the viewport to device-width may compress the body of an HTML page set to 100% height to less than the device height, which is a problem if you're working with a footer. I ultimately solved this by padding out the body with extra space depending on the aspect ratio.
After dealing with this problem I'd recommend avoiding fixed items on mobile devices, unless you specifically target a userAgent. In general mobile devices are too dynamic in size, and using fixed headers seem to be a bit more trouble then they're worth.
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I have a question regarding responsive desing on tablets:
The goal is to have 2 or 3 divs below each other, 100% height so they look like full-screen pages. When visiting my responsive website (work in progress) on an iPad everything looks fine. But as soon as you turn the device, some unnecessary margins start to appear and the device will zoom in on the content.
My question:
Is this normal, or did I miss a few lines of code?
Edit: forgot to add the site http://www.danielsneijers.com/
This is a known bug with iOS and there is a workround available: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/
Wilst setting a maximum scale in the viewport will get round this, it also disables zooming on all devices which is very bad for accessibility and means your website is more likely to have issues with future devices.