I recently built a "responsive" webpage with bootstrap. The weird thing is when I check the different resolutions on my computer I can see that the page is truly responsive. When I checked it on my phone the text was small, the navigation menu didn't change to its responsive mode. When i minimize the browser window to the resolution of a phone it works perfectly.
(By the way i checked it on my Gallaxy S3 and WP8, I'm pretty sure the problem is in all mobile devices). I came a cross something called viewport, but its quite hard to understand how to use it.
Can someone help with this problem? How can i fix it?
Thank you all in advance!
Add this to your html:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Related
So, I'm developing the website and it works well on PC screen but doesn't work on mobile screen.
At first time website looked as 'before changes on mobile'
I thought the problem with size of main picture and changed the size from 700x700px to 500x500px. I changed the width of div with the description(below) from 1200px to 900px as well. And after that website looked as 'on mobile screen'. As you can see,changes didn't help. The white line remained in the right side of mobile screen. I don't have any ideas how to solve this problem.
Have you tried optimizing the view using the following code?
<meta name="viewport" content="width=device-width, initial-scale=1">
Perhaps you should also try repsonsive design frameworks like Bootstrap.
I'm building an application and by far the weakest part of my game is Style and Design. But, I'm having one particular problem at the moment. I'm trying to make my dashboard responsive but when I look at the dashboard as an iphone 6 with my chrome inspector the screen zooms out really far and everything breaks... Here is a screen shot of what I mean.
See how the content is really far away... I really don't know how to fix this? Any idea what I could be doing wrong?
Please try to add this to your HTML's <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Reference: w3schools
I'm getting some weird behaviour that I'm not sure why it's happening.
I'm building out an site. When running this locally in Chrome and Safari, it displays fine, everything adjusts as you'd expect. However, in responsive mode, and when viewed directly on mobile, the entire site is scaling down in size to fit. By this I mean the entire site every element all reducing in size to to be shown as it looks at desktop size.
I'm using Bourbon/Neat, with a bit of flexbox here and there, which I have done many a times before. I've just never experienced this. Any ideas?
You likely need to add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the <head> section of your html
Jordan's answer is in the right direction but it didn't work for me.
There is another post here on Stackoverflow that has a more comprehensive meta tag, that fixed it for me:
Small fonts in mobile website
I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
So I'm working on this new design for this website: www.descola.org.
I was working on my localhost and it was all great, and I was very careful to have a nice view on mobile screens.
But when I uploaded the new design to the server and opened on my phone, things were not as they should be displayed on "XS" screens. They are being shown as on "SM" screens. For instance, the navbar isn't collapsing and the images are shown beside the product descriptions instead of above them.
You can take a look at it here: www.descola.org/dev
Anyone have a clue on what am I missing here?
Cheers,
Sorry about the lack of details in the question. But I've figured it out.
Since the previous website wasn't responsive, these two statements wasn't in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Now it works!
Cheers,
What is the screen resolution of your phone? Your phone could have a physically small screen but with a reasonable resolution that is higher than 'XS'. So the fact that your phone is a mobile device does not automatically mean that it is an 'XS' device in fact it can be an 'SM' device
Cheers