I have created a fluid webpage, i used % width to make it adjust to every resolution.
But the problem is in mobile device the page layout breaks. I want to zoom out the page for mobile device so the page fits in small width and user can zoom in to enlarge the page.
I tried the below meta tag. But the problem is here user can't zoom in. user-scalable=yes and initial-scale=0.25 is not working together.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.25" />
Related
I have a site with an embed element:
<embed src="https://cf.milan1.nl/" style="width:294px; height: 109px;">
The problem is, on mobile screen the element is tiny, no matter what I tried.
You need to define the initial scale of page on mobile devices so the page fit the mobile resolution. Try this in the header of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've defined the width and height of all my web page elements in pixels, which lead to huge blank spaces when displayed on larger screens. It's quite time-consuming to redefine everything to percentages. Is there a way to make my current webpages fit to any size screen automatically
This gives you a responsive web design to fit any mobile, tablet, and laptop screen.
---> W3schools gives a better explanation <--
add the meta tag in the
<head> in between these lines </head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
When on a desktop/laptop, if you zoom in on a website, the text (and entire page) adjusts to fit the screen. However, when you zoom in on mobile, you instead scroll horizontally, and no elements adjust for the new zoom.
Why is this? Is there any way to make mobile browsers mimic the behavior of desktop browsers so that the webpage adjusts to the zoom?
The relevant parts of my <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm also using Bootstrap CSS.
Regular zoom on mobile:
Regular zoom on mobile
Current behavior on mobile (page is cropped, horizontal scrolling enabled):
Current behavior on mobile
Desired behavior on mobile (aka current behavior on desktop). Margins adjust to fit new screen width:
Desired behavior
Possible duplicate of HTML - Prevent horizontal scrolling when zooming in on mobile
To achieve that, in css of body tag, set overflow to `. Also Refer
body{
font-size:100px;
overflow:hidden;
}
<body>asdklajflksjfklaklsjklsfajklasjflkajfalshgkdhioqwefmahlashjfdhkjhaslkfhlakjhldhlkjhfsajlkhalksj</body>
I was building a non-responsive website whose minimum width is 1600px. How to center all content and let all content be visible while viewing on mobile? I set the meta viewport to <meta name="viewport" content="width=1600">, but the content is not center on mobile. And there is a horizontal scrollbar appeared. (on iphone 5) Thank you.
Use <meta name="viewport" content="width=device-width, initial-scale=1.0"/> to render the web page in respect to the mobile display.
I'm wondering about how to set the 'intial-scale' so that on various devices the width of the site fits the width of the screen when you 1st load it.
My website
http://bam.net16.net/BAM/
It works just fine on regular browsers but I had weird behaviour with text inflation + iframe being half blank on mobile device browsers.
The viewport meta tag is helping me. This is working ok now.
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3" />
<meta name="apple-mobile-web-app-capable" content="yes" />
At the moment if the initial scale is big and the site starts out zoomed in then the portion of the iframe within the site that is off screen is never drawn when you zoom out. If have it set with a small initial scale so that it starts way zoomed out you can zoom in and it all works OK.
<meta name="apple-mobile-web-app-capable" content="yes" />
What fixed my problems was actually removing all those meta tags above and adding this line to my CSS:
html * {max-height:1000000px;}
This fixes the font inflation/boosting that was making my website not work on mobile in the 1st place.
Without any of those viewport meta tags, all browsers I tested* will automatically zoom to the page width.
*default, Chrome and Firefox on android.