Javascript and screen resolution

Javascript and screen resolution - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: Javascript and screen resolution (/Thread-Javascript-and-screen-resolution)

Javascript and screen resolution - Megamente - 07-15-2013

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/

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/

RE: Javascript and screen resolution - Psycho_Coder - 07-16-2013

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

RE: Javascript and screen resolution - Megamente - 07-16-2013

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

thanks psycho! ^_^

RE: Javascript and screen resolution - Megamente - 07-16-2013

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

thanks psycho! ^_^

RE: Javascript and screen resolution - sangpenguasa - 10-09-2013

(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

RE: Javascript and screen resolution - sangpenguasa - 10-09-2013

(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

RE: Javascript and screen resolution - aganda - 12-04-2013

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..