I used Bootstrap for groundwork to develop the site to be responsive. The problem i have encountered is that when I try to watch to watch a site on mobile or tablet device the site wont response to the screen resolution. But when I try the Responsive Design View on Mozilla it all works fine. They order of included css files is Bootstrap, then my custom css and some custom query css which I used to tweak some content things.
Do you have the following within your head of your page?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If the above does not work can you please paste some code from your page for us to see what the issue could be? Thanks.
Related
Perhaps a bit foolishly, I have chosen to do my portfolio site with two technologies that I have never worked with before - Tailwind and NextJS.
while developing the portfolio, I have opened it via my mobile browser and was surprised to see that the components are rendering on half screen only. This does not happen when I refit the device width manually in the browser on the desktop.
In index.js I have the following meta tag, which I thought could fix the issue
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Would anyone have idea why that happens?
My code is deployed to github
Many thanks,
Zan
Your parent images have a fixed width, try to remove it, or add max-width.
I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine.
But when I try it on mobile it shows like in a full desktop page.
Here's my website:
dinf
when resizing the page in Devtools:
When simulating mobile
Can you please explain how can that be?
Just add the following line to the head tag of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.
I created this website: http://www.articaclima.it/home
As you can see, by resizing the browser window the mobile responsive css theme is working quite good.
Anywhere, by toggling device toolbar in the browser, or by viewing it in a mobile browser, the mobile css theme is not showing at all.
What could the problem be?
Thank you
Add Meta Viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
your website is missing this.
Hope this Helps..
The problem was that into , dynamically generated via JS: there was an "user-scalable=0".
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I think you'll find a warning in Chrome with ; instead of ,
This should work just fine:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!