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
Related
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!
When i access amazon.fr via my mobile it presents a different layout than the one is displayed if I access to amazon.fr via my desktop computer event if i reduce the width of the browser to the size of the mobile.
How does it works?
Actually the url is the same for desktop and mobile sites.
https://www.amazon.fr/
Both are absolutely same. But You can not find out the difference by adjusting the browser width.
The changes are made using window.ready function (or when window is ready). The styles are applied according to the window size that calculated when loading the page. This is to avoid excess use of media querying.
You can find out this difference from your desktop only by reloading the page or clicking on links in full width and adjusted mobile screen width
Have a look at here as well
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.
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
I am designing website for mobile access and I want to set page width, height and button sizes, so they display filling up the screen. For example if user is using HTC HD , the whole screen would be 480x800 with button sized 240x200.
However IE mobile as well as Opera load the page with some zoom level, so the buttons display either too large or too small. How can I either read current zoom level in javascript or set it from javascript?
Take a look into <meta name="viewport">. It's supported across a wide variety of mobile platforms, including (AFAIK) iPhone, Android, Blackberry, Opera Mobile and even IE6 Mobile. Basically, it lets you preset the device width, zoom level, and max/min zoom. Have a look at the Apple developer site and for more info.
Also, you can use CSS media queries to detect the shape and size of the browser, and serve up different layouts (etc) accordingly. Again, these are fairly widely supported and the Apple developer site has more information.
You shouldn't rely on using JavaScript on mobile devices because it is still not widely supported across all phones. Instead you should set the width of the page to be the same as the browser width so your pages appear at 100%, e.g. body {width: 100%; margin: 0; padding: 0;}
As for buttons you should use relative values or use different image sizes if you are able to detect the browser width before the page is loaded.