I have a website, its uses the 960 grid system, everything is fine.
Except the header, the header is too tall!
Is it possible to reduce the entire website size when the user's screen is less than or equal to 1024x768 ?
(same way you can press CTRL+ and CTRL- in IE?)
IE does support the non-standard zoom style, which you could apply to the <body> if you detect the window size is too small.
Technically this is possible, but I would advise against using such non-conventional approaches. I would just use a short header that will look good both in <= 768 and > 768.
After the document is loaded, you could check (using JavaScript) the client height of the body and apply a style to your <body> element (or just the header) to set the font size to a certain percentage. All your other dimensions would have to defined in em or percentage units so that the base size at the main container propagates to child elements.
Related
Hi so I created a web page that looks fine on my desktop monitors. When I viewed the page using a laptop, the page looks abnormal. However, when I zoom the page to 67% it appears fine. Both my monitors and my laptop has the same resolution, 1920 x 1080, but my monitor is bigger than my laptop's one. I know that i can change zoom in CSS but it would look bad on my pc. I was wondering is there a way to change zoom based on screen size in javascript or CSS.
One option could be using media queries in your CSS to change the styles that get applied depending on the size of your screen. You could have one set of styles that works for larger screens like your PC, and another that applies for smaller screens like your laptop.
This can be done with JavaScript if you include the viewport meta tag in your HTML.
if (document.body.clientWidth < /*screen width pixels*/) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=0.67, user-scalable=0');
}
You can substitute the properties below with different values to test out what works for you.
initial-scale property controls the initial zoom level (possible range between 10%-1000% or 0.1-10.0).
user-scalable=0 prevents users from zooming
I have almost always used $(window).width() to check the viewport width. It normally works for both browsers and devices. But for a website on which I need to show a particular splash screen if viewport width is less than 768px, this is not working. It gives correct width upto a point but below that it keeps giving 980px howsoever narrow I make the browser. There are a few particular conditions for this site:
This site was responsive in beginning (using bootstrap) but then made non-responsive. For this we removed viewport meta tag and set following rule in css that overrides its responsive widths:
.container{ width: 1170px; }
If I resize the whole browser i.e. the window that contains all browser tabs, then it does give correct width (less than 980px also, which is the desired behaviour), but if I use development tools and use the mobile layouts from there then width is never reported to be below 980px.
It would not have mattered that it worked on resizing only the main browser window, but the issue is that it is not working in devices as well. I added an alert and on mobile devices, again width is never alerted to be less than 980px.
Can someone please suggest some solution for this or explain why it is not working as expected?
I can't seem to find any authoritative source, but there are many pages that mention smartphones assume a website is 980px wide unless told otherwise.
Apple's developer site for instance says
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different. See Supported Meta Tags for more on viewport.
Figure 3-4 Comparison of 320 and 980 viewport widths
(Incidentally, it was the iPhone which first did this, but other phones soon followed.)
So the solution is either to put
<meta name="viewport" content="width=device-width">
into the head (in your case, back into the head), or, acknowledge that the site is now not-responsive, and will not perform optimally on a phone!
I have a web app that needs to be within a container of a fixed size. I want that container to always be completely visible on the screen of mobile devices. (Particularly I care about iPads.) In my case, the container is 1000px wide by 650px tall. Essentially, I need something that would be the functional equivalent of <meta name="viewport" content="min-width=1000, min-height=650">. But min-width and min-height aren't valid in a viewport meta tag.
I already have the page laid out such that if the window or viewport has extra room the content is displayed centered on the page. I've tried using the orientationchange event to change the content attribute of my meta tag, but no luck. With some configurations that I've tried it loads correctly initially (sometimes, refreshing or reopening the page often yields different results) but upon changing orientation it becomes incorrect.
This is the closest I've come to getting it to work (in the window.onOrientationChange event):
var mvp = document.getElementById('myViewport');
if(window.innerWidth / window.innerHeight > 1000 / 650) {
mvp.setAttribute('content',"user-scalable=yes, height=650");
} else {
mvp.setAttribute('content',"user-scalable=yes, width=1000");
}
Where of course #myViewport is my viewport meta tag. This works correctly in portrait (although when switching back and forth I have to manually zoom back out,) but doesn't add the extra width needed to zoom out to see the full app height in landscape. Also, I'd prefer not to allow users to zoom in and out because of the nature of the app, and certainly don't want to require them to zoom out every time they change orientation.
If there is a way to force the zoom to always fit to screen, something akin to minimum-scale=auto, maximum-scale=auto, it seems like that would work (if I could get the width correct in landscape,) but I don't know of such a mechanism. I also tried using javascript to determine the scale, based on window.outerHeight or window.outerWidth depending on which one is the determining factor, but that wasn't successful either.
And please don't tell me that this is bad design, because the specs come from the client for their internal-use app and there's nothing I can do about them.
In javascript, window.open() with width=500 height=500 open a new window with page size(the area in which the html is displayed) of 500 by 500. But the size of the whole window is larger (width and height in the picture, depends on theme,operating system etc...)
Our system needs to use window.open() in different environments (OS's, themes...). In each environment the window needs to open in max size so it covers the whole screen and only the taskbar is not covered.
In order to do so, I need to be able to find the size of the extra controls(all the aero glass and buttons ). If I had the width and height of whole window, I could substract from it the page size. Is there a way to get those values (height and width of the whole window) ?
if I understand good, you can find the extra space with:
window.outerHeight - window.innerHeight
You could use screen.height;andscreen.width; to get the full scrren resolutions or screen.availHeight to get the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.
For information about window.height and sreen.height see the post from jigfox.
For a site, I need to be able to dynamically display background images depending on the user's screen resolution.
I.e when the page starts loading, within the <head> a small javascript loads, which sets the page's background via css to something like http://example.com/backgrounds/beach_800x600 where 800 and 600 is the screen resolution determined via the javascript.
I'm creating various resized images for the most common screen resolutions, so that for most people there will be an exact match of their screen resolution with an existing image. If there's not an exact match made, e.g if a user has a screen resolution AxB for which there's no existing image, then an image will be created & resized to AxB on the fly, and will be served. From then on, anyone with the resolution AxB would be served that image.
The questions I have are:
1) Is this a safe method? I.e I don't want more than 50 custom sized images created for custom screen resolutions. Would I be able to stay in that ball park with this method? And are there any other security risks I should be aware of with this method?
2) Should I give it an error margin of say 50 or 100 pixels, so if someone's resolution is 700x900, and I don't have that but I have 600x800 or I have 800x1000, then I would serve those existing images rather than create new ones? If so, should I set the margin at 100 pixels or is there a better number?
Through the use of CSS3 Media Queries and the background-size property, there's virtually no need for JS other than for compatibility purposes with out-dated browsers.
Here's a link with details about background-size. This property allows you to scale the image in various ways, regardless of the users resolution. Sometimes this might not be ideal.
And so we have CSS3 Media Queries. With these, you can target certain resolutions (or greater than and less than certain resolutions) and tell the browser which image you would like to show accordingly (or even how to display it, with or without background-size as well).
You would probably not want to create an image for each screen resolution, and you would probably want to base it off the browser window size - not screen resolution. Given that a window could be virtually any size, you might want to re-think this.
Also this can be done easily using CSS3 media selectors, not JavaScript (though it could also be done using JavaScript).
See here for some info about media queries http://webdesignerwall.com/tutorials/css3-media-queries