I have made very basic page, here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
#Canvas {
width: 1400px;
background-color: #09F;
position: relative;
margin-left: auto;
margin-right: auto;
}
#SiteHeader {
width: 1200px;
background-color: #CCC;
height: 165px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
border: 5px solid #F0F;
}
</style>
</head>
<body>
<div id="Canvas">
<div id="SiteHeader"> Why does this not fit in the screen? </div>
</div>
</body>
</html>
Just a simple #Canvas div to hold the content, and then a #SiteHeader div with a border around it. Here is a link to it:
The problem: When this page is viewed in a browser such as IE 11 on my Windows 8 RT tablet, the page does not fit the screen. When I say fit I mean that it should appear zoomed out so that I can see the entire page. I have to scroll horizontally to see the entire page.
I tried to use <meta name="viewport" content="width=1400"/> which seems to work for Android but not IE in Windows 8 Metro app.
I want the full 1400px width to appear on the screen even if the resolution of the screen is not that wide. It just needs to load zoomed-out but for some reason this page doesn't. Please can anyone suggest why?
You need to use this way, so that whatever the page size is given, that won't be changed by the viewport.
<meta name="viewport" content="width=device-width, user-scalable=no">
But in this case, there will be scrollbars in the small devices. Try it out yourself.
Okay, I think I figured it out.
Although these other website do have wrapper divs which far exceed the width of most devices, the actual content is inside a div which is less than 1080px wide.
My Windows 8 tablet has a resolution of 1920x1200. So when I rotate to view in portrait mode (display width of 1200px), it appears as if the website has shrunk (or been zoomed out of) to fit, but its not. Its just the extra background detail in the wrapper div has been chopped off, but the content still fits in the portrait width of my device which is 1080px.
If my tablet had a lower native resolution say 1024x768, then even a 960px width website would get chopped off in portrait mode.
Finally, and maybe most importantly, any divs that provide a background must not have a width set that is not flexible. Basically, always set CSS attribute to max-width: 1200px; rather than width: 1200px. This means that on smaller screens it will collapse to the width of the inner content div.
Related
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
I got page looks like this
<html>
<head>
</head>
<body>
<div class='canvas'>
Some content here, table other divs and others
</div>
</html>
div.canvas {
margin: 0px auto;
padding: 0px;
width: 600px;
}
I need to fit "canvas" div to screen in android webView. Unfortunately I can't edit page on server.
Is there any other option instead of download html string, them edit it local and display it in webView ?
With css you can set the height to 100%, the issues is making sure your WebView is set to fill_parent as well, it won't work with a wrap_content setting
I am working on a phonegap application. It is only for portrait view. On Devices more than 4 Inches, my screens seems so small and there is 2/5 empty space under the content(jQueryMobile form controls), to fill empty space I had the option to increase size of fonts and heights e.t.c. but that wasn't good because it will have bigger fields and font sizes on small devices which are 3.2 inches high.
So I am setting font-size after some calculation according to height of device, it seems better. As it fit for device but as font-size increase in both width and height, so fonts and elements were messing up because font-size was bigger with respect to width. This can be solved by reducing the calculated size. But then the problem is that some devices are 5.3 inches high but have same width as 3.2 inches phone.
My requirement is not to exactly fit the screen and no empty space but to fill enough space and look same on most of devices. So if there is some other way to achieve this thing, either by using different unit like percentages or 'em' e.t.c. then those solutions are very welcome. And any effort will be appreciated.
To solve this issue, u will have to take help of css. Make css style of each and every element to percentage. Eg. Lets say below example
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
margin:0;
padding:0;
}
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
}
.header{
position:relative;
background:blue;
width:100%;
height:20%;
}
.content{
position:relative;
background:pink;
width:100%;
height:60%;
}
.row1{
width:100%;
height:100%;
}
.footer{
position:relative;
background:green;
width:100%;
height:20%;
}
</style>
</div>
<div class="content">
<div class="row1">
<img
src="http://media1.santabanta.com/full1/Emotions/Love/love-130v.jpg" style="width:100%; height:100%" />
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I have a box with a border.
border: 1px solid #000;
I am using the following viewport setup:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
The border seems to be 2 pixels on the top and right side.
What is the reason for this?
Additional: there are no other CSS rules other than a width and height.
The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density.
How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match.
This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
div {
border-width: 0.5px;
}
And similar techniques are shown here:
http://n12v.com/css-retina-and-physical-pixels/
https://developer.android.com/guide/webapps/targeting.html
"Could you modify your answer to make it working for all devices, regardless the DPI? Would be super useful! – Basj"
i dont know how much this helpfull
here i added a custom function to get border size on almost all dpr
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Ratio</title>
<style>
.bord {
width: 300px;
height: 300px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="bord"> </div>
<script>
dprof("bord");
function dprof(elmclass){
var z =document.getElementsByClassName(elmclass).length;
var dpr = window.devicePixelRatio;
for(i=0;i<z;i++){
document.getElementsByClassName(elmclass).item(i).classList.add("dpr-"+dpr);
var bw =getComputedStyle(document.getElementsByClassName(elmclass).item(i),null).getPropertyValue('border-width');
var nw =bw.replace("px","");
var nbw=nw/dpr;
console.log(nbw);
if(nbw!=0){
document.getElementsByClassName(elmclass).item(i).style.borderWidth=nbw+"px";
}
}
}
</script>
</body>
</html>
Unless you have a very good reason for it (doubtful), disabling user-zoom is a very bad idea. See user-scalable=no … Evil or Slightly Not Evil? for examples of why this is bad. It also gives some examples where user-scalable=no is perfectly acceptable.
for a 1.5 pixel-ratio, try
#media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
div {
border-width: 0.75px;
}
}
I have a fixed-width web page (640 pixels wide). I would like this page to shrink to the width of a mobile device. However, if the device's native width is larger than 640 pixels, I do not want it stretched. Seems simple enough:
<meta name="viewport" content="width=640, maximum-scale=1.0" />
This works as expected in iPad/iPhone. However, on an Android tablet (ex. in landscape mode), the content gets scaled up to fit the display. In other words, Android is simply ignoring maximum-scale=1 . You can see an example page with the problem here. For the sake of completeness here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Viewport</title>
<meta name="viewport" content="width=640, maximum-scale=1.0" />
<style>
div.bar {
position: absolute;
width: 636px;
height: 50px;
background-color: yellow;
border: 2px solid black;
left: 50%;
margin-left: -320px;
}
</style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>
I've been doing a lot of researching and experimentation with the viewport meta-tag. I've read just about everything on the topic, but haven't seen this seemingly basic issue mentioned.
Two notes:
This is not a target-densitydpi issue
Setting the viewport width to device-width is not helpful in this case because the content width is fixed and larger than (for example) a phone's portrait device width. If I set width=device-width, the page will not automatically be scaled down to fit the phone..
Thanks much.
After more banging my head against a table, I have found a solution:
Unfortunately it seems that iOS and Android simply behave differently (Android is very clearly not doing what the spec says by ignoring maximum-scale). The solution is to specialize based on resolution using JavaScript:
If the screen width (see note below) is greater than or equal to the fixed page width (640 in my example), then set the viewport meta-tag's content width to the screen width
Else set the viewport meta-tag's content width to fixed page width (640)
Presto. Lame that it requires JavaScript specialization, but such is life.
Note that the Javascript screen.width on iPad/iPhone is incorrect if the device is landscape mode (the iPad still reports the portrait width instead of the landscape width, unlike Android which gets it right in this case!). Therefore, you'll need to check window.orientation on iPad/iPhone and use screen.height instead of screen.width if you are in landscape.
I'd rather use
width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi
Instead of just the Max scale property...
The target-densityDpi property si Android specific, maybe it can fix your problem.