Javascript and screen resolution

Megamente · 07-15-2013, 10:06 PM

Often, we have some problems with the screen resolution on Web Sites or Applications. Let’s imagine that we have created a very useful service for Web, created primarily for 1024px screen resolution or higher, with three columns of content, large images etc.., and it receives 10,000 hits daily. Cool

By analyzing the statistics system, we found that 30% of users who access our application use 800 x 600 resolution, and 8% are still using the resolution of 640 x 480 px. Certainly the level of rejection of such a system, however good are its features, will be high, because the experience that users will have will not be very pleasant. :oO:

To solve the problem, we use a simple feature, Java Script, causing the browser to recognize the resolution of an specific user and assign a specific CSS to that resolution. Let's start below:

Code:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>Detecting screen resolution</title>

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />

<script type=”text/javascript” language=”javascript”>

if (screen.width >= “1024″) {
document.write(’<link rel=”stylesheet” href=”style.css” type=”text/css” />’)
}
else {
document.write(’<link rel=”stylesheet” href=”style2.css” type=”text/css” />’)
}
</script>

</head>
<body>

Your html here!

</body>
</html>

Enjoy! o/

Megamente · 07-15-2013, 10:06 PM

Often, we have some problems with the screen resolution on Web Sites or Applications. Let’s imagine that we have created a very useful service for Web, created primarily for 1024px screen resolution or higher, with three columns of content, large images etc.., and it receives 10,000 hits daily. Cool

By analyzing the statistics system, we found that 30% of users who access our application use 800 x 600 resolution, and 8% are still using the resolution of 640 x 480 px. Certainly the level of rejection of such a system, however good are its features, will be high, because the experience that users will have will not be very pleasant. :oO:

To solve the problem, we use a simple feature, Java Script, causing the browser to recognize the resolution of an specific user and assign a specific CSS to that resolution. Let's start below:

Code:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>Detecting screen resolution</title>

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />

<script type=”text/javascript” language=”javascript”>

if (screen.width >= “1024″) {
document.write(’<link rel=”stylesheet” href=”style.css” type=”text/css” />’)
}
else {
document.write(’<link rel=”stylesheet” href=”style2.css” type=”text/css” />’)
}
</script>

</head>
<body>

Your html here!

</body>
</html>

Enjoy! o/

Psycho_Coder · 07-16-2013, 10:51 AM

Nice piece of code. This will help others in learning web development and making flexible websites. Good work

Psycho_Coder · 07-16-2013, 10:51 AM

Nice piece of code. This will help others in learning web development and making flexible websites. Good work

Megamente · 07-16-2013, 01:01 PM

Quote:Nice piece of code. This will help others in learning web development and making flexible websites. Good work

thanks psycho! ^_^

Megamente · 07-16-2013, 01:01 PM

Quote:Nice piece of code. This will help others in learning web development and making flexible websites. Good work

thanks psycho! ^_^

sangpenguasa · 10-09-2013, 01:21 PM

(07-15-2013, 10:06 PM)Megamente Wrote: Often, we have some problems with the screen resolution on Web Sites or Applications. Let’s imagine that we have created a very useful service for Web, created primarily for 1024px screen resolution or higher, with three columns of content, large images etc.., and it receives 10,000 hits daily.

By analyzing the statistics system, we found that 30% of users who access our application use 800 x 600 resolution, and 8% are still using the resolution of 640 x 480 px. Certainly the level of rejection of such a system, however good are its features, will be high, because the experience that users will have will not be very pleasant. :oO:

To solve the problem, we use a simple feature, Java Script, causing the browser to recognize the resolution of an specific user and assign a specific CSS to that resolution. Let's start below:

Code:
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>Detecting screen resolution</title> <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” /> <script type=”text/javascript” language=”javascript”> if (screen.width >= “1024″) { document.write(’<link rel=”stylesheet” href=”style.css” type=”text/css” />’) } else { document.write(’<link rel=”stylesheet” href=”style2.css” type=”text/css” />’) } </script> </head> <body> Your html here! </body> </html>

Enjoy! o/

Which is Better . .
Boostrap Or this Script

sangpenguasa · 10-09-2013, 01:21 PM

(07-15-2013, 10:06 PM)Megamente Wrote: Often, we have some problems with the screen resolution on Web Sites or Applications. Let’s imagine that we have created a very useful service for Web, created primarily for 1024px screen resolution or higher, with three columns of content, large images etc.., and it receives 10,000 hits daily.

By analyzing the statistics system, we found that 30% of users who access our application use 800 x 600 resolution, and 8% are still using the resolution of 640 x 480 px. Certainly the level of rejection of such a system, however good are its features, will be high, because the experience that users will have will not be very pleasant. :oO:

To solve the problem, we use a simple feature, Java Script, causing the browser to recognize the resolution of an specific user and assign a specific CSS to that resolution. Let's start below:

Code:
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>Detecting screen resolution</title> <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” /> <script type=”text/javascript” language=”javascript”> if (screen.width >= “1024″) { document.write(’<link rel=”stylesheet” href=”style.css” type=”text/css” />’) } else { document.write(’<link rel=”stylesheet” href=”style2.css” type=”text/css” />’) } </script> </head> <body> Your html here! </body> </html>

Enjoy! o/

Which is Better . .
Boostrap Or this Script

aganda · 12-04-2013, 11:29 PM

I think bootsrap or another css framework is better if you will develop a big responsive website, personally I will use that script to make some tricks in the page..

aganda · 12-04-2013, 11:29 PM

I think bootsrap or another css framework is better if you will develop a big responsive website, personally I will use that script to make some tricks in the page..

Javascript and screen resolution
Author Message