I have a problem with the displaying pages of my project in tablet "Galaxy note 10.1". The page doesn't have full width background-image of body element, neither for example footer element. In every browser this worked well, but not in Galaxy tablet. I've never optimized for tablets and I don't know how to find solution for this bug.
Is there way to set width of element to 100% in galaxy note?
Thank Piklis
Maybe You are talking about
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Related
My website is all messed up for my iPhone and Samsung Galaxy S2. I have created a sort of responsive website which adjust the sizes of everything properly apart from the sizes of each font, more specifically when in portrait on my iPhone 5s the text is too small, however if viewed in landscape the font-size is just right, same for my SGS2. Also another problem I have is when I load the page for the first time on my iPhone and SGS2 I have to zoom out first because it shows only a certain percentage of the page.
Please help, I have been trying to sort this out for ages now. Here is the link to the website I'm talking about.
Oh, also when I view the website on my laptop the font-size is just perfect but then I guess the window isn't to scale.
Let me know if you want me to include all the HTML and CSS
You could use some viewport properties :
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />
You can also set stylesheet for handeld devices.
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
Documentation links below are useful :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.html5rocks.com/en/mobile/mobifying/
It resizes perfect to android but it still looks like a full page in iphone so the text is really small, I ve tried everything I found about it but no luck.
this is the viewport setting right now
<meta name="viewport" content="width=device-width" />
thank you guys, i ll appreciate any help.
Try adding 'initial-scale=1' to the viewport tag:
<meta name="viewport" content="width=device-width,initial-scale=1" />
And you can read more about the viewport tag on Apple's developer site
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.
Is there a possbility to disable the initial zoom you get when viewing a page with your smartphone?
I don't want to disable zoom, I'd just like the user to view the entire page (=> width) when loading it and not just a small rectangle.
I've tried several solutions suggested by others but none of them worked for me.
Okay well that was easy. I slightly tweaked a solution I found from Google. Here's the only code that worked for me:
<meta name="viewport" content="width=960; user-scalable=yes;" />
It sets the default zoom to 960px (change to the width of your page) and still allows the user to zoom in/out.
EDIT: It looks like it allows zoom on the default Internet Browser (SGS4) but it disables zoom when using Google Chrome.
Try add this to the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", target-densitydpi=device-dpi />
Where initial-scale is how much you want it to be initially, maximum-scale is how much the user is able to zoom, and user-scalable is whether or not they are allowed to zoom.
The target-densitydpi=device-dpi is needed for mobile devices with a high dpi (or resolution) such as the Samsung Galaxy S4 but it is added to the end of the meta because devices such as the iPhone does not recognize it.
I haven't tested this myself on an SGS4 because I do not own one but if you want to be specific on the initial-scale of the device, can try adding media="(device-width: 480px) and (device-height: 800px)" after user-scalable where 480px is the viewport width of the SGS4 and the 800px is the viewport height of a SGS4.
So it should look like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", media="(device-width: 480px) and (device-height: 800px)", target-densitydpi=device-dpi />
Add this to your head <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Read up here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have a webpage optimized for viewing in a mobile.
I am utilizing the viewport meta tag <meta name = "viewport" content = "width = device-width"> which detects the device width and sets the viewport width to that. This means my webpages load properly in a mobile browser rather than looking ridiculously zoomed out.
When I load the page on my mobile (which is a Samsung Galaxy S2) in portrait mode it looks fine, I rotate to landscape and it looks fine, but then if I rotate back to portrait again the page has zoomed in slightly. I either have to zoom out or scroll horizontally.
Why is my mobile browser doing this and how can I stop it happening?
See screenshot for a visual aid to what is happening.
It seems that even though a resizeEvent is firing after orientation change, the device is still failing to reset the zoom after zooming in to fill the wider landscape viewport.
I had to do BOTH of the following to get the display to resize properly after orientation change:
(1) Setting minimum-scale=1.
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0">
(2) In CSS file:
body {
height: 100vh;
height: -webkit-fill-available;
min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
min-height: -webkit-fill-available;
}
This is what you need
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />