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.
Related
I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
The height of the screen on mobile is not 100%. It looks good on bigger devices though.
This is how the page looks DESKTOP IMG
I tried to include <meta name="viewport" content="width=device-width, height=device-height" /> but it only makes the content bigger and it wont solve the problem.
This is how it looks after i used that. PHONE IMG
The footer moves down the more i add stuff in the content. I also tried to give height 100% to the body but that wont fix it also. Is it possible to make the page fit the size of the device so it looks same in every device.
Setting the height on the body is not a good idea. You better work with a sticky footer if that is what you want. (For example: http://ryanfait.com/sticky-footer/)
Try making your webpage responsive by using frameworks like Bootstrap. (Example: https://getbootstrap.com/)
If you really insist to set the height on the body, please add your html to make sure we can show you what you are doing wrong.
I am using bootstrap 3.0 for my website and i use #media queries in CSS to create a responsive design. I would like to add a button that allows someone on a phone to view the site as they would see it on a larger desktop screen.
Is there a way i can force CSS to think that the max-width/min-width is a certain size? I don't want to actually show scrollbars, just change what rules are applied to match what would be shown for larger screen sizes.
You could manipulate the meta viewport tag to use a specific pixel dimension, an example with jQuery would look like:
$('meta[name="viewport"]').attr("content", "width=1280")
If you wanted the screen to render 1280 pixels into the viewable area.
You will follow these steps
1)add this meta tag to your html page inside of head tag
<meta name="viewport"
content="width=device-width; initial-scale=0.95;" />
2)in css file for every .class you can do this one
#media(max-width:1280px){
.abc{ width:100%;}
}
try to these steps. You can solve your problem
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
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.