How to set screen resolution dynamically useing javascript in HTML? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

I'm developing a web-application for mobile & iPod, so platform independent开发者_运维百科. For that I'm using html for the front end embedded in adv.java servlet.

However, I have a big problem with screen resolution. How can I set the screen resolution dynamically for any web-browser?

Ideally I don't want a horizontal scroll bar; so what approach might work here?

---

Alter your page design with css3 media queries:

http://www.webdesignerwall.com/tutorials/css3-media-queries/

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

---

You cannot really change the browser size on mobile phones with JavaScript.

What you need is to use different CSS rules based on the client. You can achieve this either by sniffing the User-Agent HTTP header and serving up a specific CSS file from the backend or by using CSS3 media queries.

---

You are going to have to do a bit of research, but below I've outlined some tricks you can do to acheive what you want (I think?)

As Ates mentioned you can use conditional CSS style sheets, for example:

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="../style/ie.css" media="all" />
<![endif]-->

That style sheet will only be 'run' by Inernet explorer browsers, it's useful for fixes. However, again you may need to research the behaviour of these in different types of browsers, especially new ones on mobile platforms.

You can sometimes extend this further to specific versions as well, for example:

<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="../style/ie7.css" media="all">
<![endif]-->

Or, also as Ates mentioned, your server can detect the User agent string (99.99% of the time this will be honest, some users do modify/clear these for reasons of security/paranoia/spoofing) so they are not gospel but as good as.

Here is how to request various variables with Java servlets:

String accept = request.getHeader("accept");
String user_agent = request.getHeader("user-agent");
String accept_charset = request.getHeader("accept-charset");
String accept_language = request.getHeader("accept-language");
String x_wap_profile = request.getHeader("x-wap-profile");
String profile = request.getHeader("profile");

The one you are after is probably user-agent this should contain browser information and version. Again, you are going to have to do tests to determine what sort of strings you need to process, as far as I know there isn't a standard comprehensive list of 'live' user agent strings.

Here are some examples of user agent strings:

Your User Agent is: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 ( .NET CLR 3.5.30729)

http://user-agents.my-addr.com/user_agent_request/user_agent_examples-and-user_agent_types.php

If you write code based on this as well, it's going to suffer from issues relating to new releases and becoming out of date probably very fast.

Another solution, would be to serve an iframe on your page, you can set properties/style it exactly as you wish, with or without horizontal/vertical scroll bars, you can set it's exact size, and lots of other things. Here are the properties for an iframe:

SRC=URI (URI of frame content)
NAME=CDATA (name of frame)
LONGDESC=URI (link to long description)
WIDTH=Length (frame width)
HEIGHT=Length (frame height)
ALIGN=[ top | middle | bottom | left | right ] (frame alignment)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
SCROLLING=[ yes | no | auto ] (ability to scroll)

So combining the serving of specific style sheets to different platforms with your iframe might yield results you are after.

I also recommend you start reading and learning about CSS as it will help you greatly.

---

Also, in all your CSS, remember to use relative sizes. i.e %'s and em's instead of pixels and points.(for texts, margins, paddings wherever applicable)