Hi guys I hope there are someone that can give a solution for this:
When coding a responsive website I get the problem when the screen turns on a ipad it don't reset the zoom meaning that when users turn to vertical it will zoom in and you have to reload the page or zoom out to see the full design is there a way to force a reset on the zoom or reload when users turn the screen. I pref if the solution comes in css becuase it's only on ipad device the problem is and I can control this in the .ccs fil assignt to devices
I know there has been some questions about this but nothing of that I could use becuase I'm not trying to block that users can zoom in or out but I'm trying to reset the zoom on screen turn
Best regards
Lasse
Add the following meta tag in your HTML code (Inside head tag)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Related
I am developing a responsive website and I have doubts about the following statement related to viewport meta tag from Mozilla:
Suppress the small zoom applied by many smartphones by setting the
initial scale and minimum-scale values to 0.86. The result is
horizontal scroll is suppressed in any orientation and the user can
zoom in if they want to.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
Does this mean that responsive web pages should have this line to avoid possible small zooms in some smartphone, as Mozilla states in the link above?
I am asking because for me it is working initial-scale=1, but I see that in this link changes the scale. I actually see that most of people use scale 1, but did not find many cases using this 0.86 scale, which would make sense for me as I would like to avoid this possible zoom. Am I missing something?
Thanks!
https://i.stack.imgur.com/9pEp0.png
I don't know what's the name, but why i always get this style everytime i access http://forumesia.com
But the style is ok if i access it in desktop. Only in my mobile phone i got crop little part of the website, how to fix this?
I already using bootstrap css but it still croping like that, any suggestion?
This is usually because the device doesn't know to scale the website to the device width.
You should make sure that <meta name="viewport" content="width=device-width, initial-scale=1"> is added in the head section of your HTML
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 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.
I'm using Bootstrap for a website and I notice that when I view my layout on a mobile device, my mobile's web browser automatically zooms in to a particular top left corner portion of the webpage. I want the browser to show the whole webpage at start instead of zooming into the top left corner. Showing the whole webpage (albeit may be a little small in size) is the default behaviour when I don't use Bootstrap.
Is it possible to get Bootstrap to show the whole webpage instead of zooming in to the page when first entering it on a mobile device?
This most likely has to do with the viewport being set. Assuming your webpage is a standard size, you can use:
<meta name="viewport" content="width=1024">
make sure to place that in the head of your page - or replace the one that is currently there.
I believe you're looking for the Viewport html tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
You can disable it by removing the viewport meta code from your . This worked in my application. If you want to have it correct for your device, put this in into head tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://getbootstrap.com/css/#overview-mobile
http://getbootstrap.com/getting-started/#disable-responsive