I'm working on a specific web layout for multiple devices and browsers (desktop and mobile). I want the web app to be full-screen all the time, with no scrolling in either direction.
I'm using JavaScript to read the available height and width of the screen (document.documentElement.clientWidth, clientHeight), then setting my elements to fit. In my simple test case, I've got an absolute positioned div tag (top:0; left:0;) with width and height set (via JavaScript) to 4 pixels less than the screen width and height, with a 2px wide border on all 4 sides.
On desktop browsers and Chrome on a couple of Android devices it works as intended - I see the border at the edges all the way around and no scrolling.
On an iPad 2 and an iPad Mini (Safari), however, the resulting div is the correct width but 20 pixels too tall - I've got to scroll a bit to see the bottom border.
I get the same results when I do it with just CSS, using:
#borderDiv {
position:absolute; top:0; left:0; right:0; bottom:0;
border:2px solid black;
}
I'm using: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Why am I getting a "wrong" height result on iPad devices?
David
Related
I have a HTML5 App, which is in a container with absolute position and 100% height of the body and therefore is not scrollable.
I want to hide the browser bar in Chrome browser on Android, to get more space on the screen. So, actually I am looking for an equivalent for the IOS meta tag
<meta name="viewport" minimal-ui">
My idea was to add some pixels to the container's height
height: calc(100% + 50px);
and then use
window.scrollTo(0,50);
to make the address bar disappear, but what happens, is that it scrolls to the right position, but the address bar doesn't go away.
Does anybody have an idea how to do this?
I am testing on Android 4.1/4.4 and Chrome 39.
I'm building an alternative to fullPage.js which will fit my needs better, but I'm having some issues getting the sections to stay at 100% height when the browser is being resized.
I have 5 sections that should all be height: 100%, width: 100% at all times. You should only be able to get one section in your browser viewport at a time. I did this using anchors attached to each section id. Then the body has overflow: hidden to prevent vertical scrolling. The sections each contain images that should also take up height: 100% with the width being determined automatically to keep aspect ration of images.
This solution works when I first load the page, but as soon as the browser starts being resized, other sections become visible, and the img's that have a height: 100% become much smaller than the full browser height. Is this is a limitation to CSS, or am I doing something wrong?
Is there a javascript solution to detect browsers viewport, and apply those height and width values to a series of id'?
Here is my codepen.
add this to your HEAD section
<meta name="viewport" content="width=device-width, initial-scale=1">
then in your CSS:
html, body{
height:100%;
}
#-ms-viewport{
width: device-width;
}
Additionally, I'd suggest to use vh (viewport height) and vw (viewport width). Read more here
I have a website which I want to follow the resizing of the browser window so that it always fits.
I tried using css transform scale property with a ratio given by current window width divided by full-screen window width.
It does re-scale but there must be something wrong with it because it leaves white blocks to the left and the right of the content (so it shrinks the site too much and then centers in in the window)
Here is the javascript code:
$(window).resize(function(){
var ratio = $(window).width()/1340;
$('body').css('transform','scale('+(ratio)+')');
$('body').css('-ms-transform','scale('+(ratio)+')');
$('body').css('-moz-transform','scale('+(ratio)+')');
$('body').css('-webkit-transform','scale('+(ratio)+')');
});
Is there a better way to make the page fit the window (or make the scaling scale properly)?
To make your website mobile friendly, you should really think about making it responsive using media queries or using some front-end framework like Bootstrap, Foundation etc.
Or if you just want to scale your website so it should not horizontally scale and fit to user's screen (No matter how small your UI component become) You can do that by adding following meta tag in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll force browser to keep the website scale enough to fit the mobile screen width.
Hope It'll help.
What you're wanting to do is build the website using Responsive and Adaptive methods. See if this link helps! http://www.imediaconnection.com/content/33435.asp#singleview
you can use this, put the whole content inside it
#wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
Use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in Html head section and
#media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
#id{style}
}
in CSS.
My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app.
I am trying to display these templates in a webview inside various mobile clients (iPhone, Android, iPad, etc). Is there a way to 'scale' or fit these templates so they stretch to fill up the entire width of the window?
I tried tweaking the meta tag;
<meta name="viewport" content="width=device-width, initial-scale=1.0>
Unfortunately I don't know the width of the template beforehand so I have to either set the meta tag too wide or too small, and then templates either have white borders or end up overlapping the window. What else can I try?
I ended up using CSS3's
transform: scale(ratio);
position: absolute;
top: 5px; left: 5px;
after dynamically calculating the scale ratio to take into account the 5px margin. Turns out
minimum-scale=0.1
was necessary for an older Android phone to display the re-sized view correctly.
I'm currently writing a Javascript plugin that needs to display an accordion notification (the sort that slide down from the top of the screen).
It works beautifully on desktop browsers simply with this css on the modals and accordions.
position: fixed;
top: 0;
left: 0;
width: 100%;
Unfortunately, that doesn't work so well on mobile browsers like Android and iOS. The default behaviour on my Galaxy S2 with Android 4 ICS is that the fixed position elements position in the correct place, and size to 100% screen width. Unfortunately, as soon as you pinch zoom and change the scale of the page, the browser doesn't seem to recalculate the 100% width and the element goes off-screen. Panning the content doesn't pan the fixed elements.
I found iScroll, a Javascript plugin which looks to do exactly what I want - except it needs the source of the main content of the page to be changed in order to work. My plug in has to work on any site and so unfortunately this isn't an option.
Does anyone have any ideas?
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to your head which should stop the mobile browser from resizing the content.