I've built my website using Bootstrap 4. There were some issues with the responsive design so I used media queries to fix those issues. The whole time I'm using Chrome's device toolbar to make the changes to the CSS. While using the device toolbar everything looks as I want it to but when I resize the browser outside of the device toolbar the media queries no longer work. I've tried this in both Chrome and Firefox.
I've prematurely made my site live to see if the issue would still persists when live and the issue is still there. Has anyone encountered this before?
Lakhan Production is the URL. I would greatly appreciate any feedback and insight. Thank you in advance.
In your media queries, you used min-device-width and max-device-width: The device width measures the device (phone, tablet etc.), not the browser window. That's the reason for what you describe. The mobile developer mode of Chrome apparently also emulates the devices that way.
I would rather use min-width and max-width instead of min-device-width and max-device-width
Related
I hope it's ok to share URL: http://www.amigote.com/user/marcus_avrelius
The header image gets resized on PC browsers but for some reason doesn't work on cell phones, shows way too high! I am not sure why please help me to find it issue?
Update! It's not working on default browser? How can I take care of that? I installed firefox app and it works!
Use 100% width so it will automatic re-sized according to browser width.
OR
You can use media query for same.
I use a tablet for all my schoolwork because I don't have a good computer, but websites often come up in mobile device format. Is there a way to set my browser to tell websites that it is a computer, and not a tablet? If it were possible, would this cause any other problems, like disabling the touchscreen, or anything like that?
There's a couple different ways to tell if you're using a tablet. Typically it's either by:
screen size (noting the typical width/height ratios of devices) and then styling by media query
the window.navigator object in the browser is aware of a handful of useful info, such as OS and browser details
Each site will determine this differently so I wouldn't be confident there's a catch-all solution to this one...that being said sometimes landscape will get desktop styling if the devs used the sizing method ¯_(ツ)_/¯
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 created a responsive website which has a mobile.css with multiple sizes to suit most common devices. What is the best practice from your experience to ensure that each size I have specified in my mobile.css will format the page correctly on all devices.
What I am wanting to achieve is a stretching of elements to fit the page when within the specified min/max limits specified in mobile.css. Are percentages the best practice to achieve this?
Let me know if you need any more information.
The best thing to do is test it on each device. You don't need to have every device that there is, you only need a device with a fixed screen size. Also try to get devices with different browsers, opera, chrome, IEmobile etc. Thats the safest.
There are websites out there that can emulate device sizes and display your website in those scales, But they do not emulate the mobile browsers. See if you can get a couple devices.(Ask friends and family or co workers.) And test it on each size you can.
Best of luck
#Media Queries are best practice in my experience refer to this documentation and there are some really nice examples
When testing FireFox has a default User Agent Plugin that can act as different Browsers, You can also get the Web developer Extension which has a resize menu to show you the responsive versions of your sites. Google Chrome has similar plugins.
I'm currently starting to use a responsive approach to my sites. I've found http://fluidbaselinegrid.com/ to be the best boilerplate for this. But with every boilerplate or grid I've tried I can't get an iPhone or iPad to recognize the media queries when you switch from portrait to landscape mode.
It always loads the correct css in the orientation that you load the page in. But when you go from portrait to landscape it hangs and doesn't resize properly.
You can even see this happening on http://fluidbaselinegrid.com/.
Does anyone know if this is a quirk with mobile webkit that we have to live with for now, or is there a way to fix this?
I contacted the developer behind Fluid Baseline Grid and got this answer:
I think what you are experiencing is the viewport meta tag.
Current:
Maximum-scale doesn't allow the user to zoom in/out with finger pinch.
However, it prevents the layout shifting when a device is changed from
portrait to landscape. This was purposely removed to help those who
may have impairment reading smaller text. You can can simply change
the meta tag in the head to set the scale, which will fix the zooming
issue when you rotate from portrait to landscape.
"If web developers want their scale settings to remain consistent when
switching orientations on the iPhone, they must add a maximum-scale
value to prevent this zooming, which has the sometimes-unwanted side
effect of preventing users from zooming in"
- http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/
That definitely fixes the issue, but it seems that you can't have the ability to zoom with a finger pinch and also control the way the layouts switch. Is there a way to work around this?
I solved adding 'initial-scale=1' only (and not 'maximum-scale=1') to the viewport meta tag