Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,155,918 members, 7,828,201 topics. Date: Wednesday, 15 May 2024 at 06:05 AM

Help With Screen Resolution Pls. - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Help With Screen Resolution Pls. (785 Views)

Website Screen Resolution / Online Dispute Resolution / What Resolution Do You Design For (2) (3) (4)

(1) (Reply) (Go Down)

Help With Screen Resolution Pls. by Raylight2(m): 8:56pm On Dec 13, 2012
Pls, how do i make my website fits into any screen resolution/size. I was told i have to use % instead of a fixed width for the body i.e body { width:x%}. Is this all i need to do? How about the content? Will they all get automatically adjusted? Pls, tell me wat to do. Thanks.
Re: Help With Screen Resolution Pls. by Nobody: 6:13am On Dec 14, 2012
Raylight_1: Pls, how do i make my website fits into any screen resolution/size. I was told i have to use % instead of a fixed width for the body i.e body { width:x%}. Is this all i need to do? How about the content? Will they all get automatically adjusted? Pls, tell me wat to do. Thanks.
use em i.e 55em
Re: Help With Screen Resolution Pls. by Raylight2(m): 1:05pm On Dec 14, 2012
Pls, how do I use the em? Pls, explain to me.
Re: Help With Screen Resolution Pls. by Nobody: 8:59am On Dec 16, 2012
Raylight_1: Pls, how do I use the em? Pls, explain to me.
Re: Help With Screen Resolution Pls. by yawatide(f): 6:39pm On Dec 16, 2012
% or em should be fine. Instead of say, 9px, you do the math for its equivalent (probably .9em, if you want to use em) and use that.

You probably want to use responsive design, for consistency. There are many articles on google for this so check those out. Basically, you can dynamically determine the screen resolution of the device the user is visiting with and serve up a css stylesheet with measurements for that particular device.

Good luck!
Re: Help With Screen Resolution Pls. by Nobody: 6:32pm On Jan 06, 2013
yawa-ti-de:
% or em should be fine. Instead of say, 9px, you do the math for its equivalent (probably .9em, if you want to use em) and use that.

You probably want to use responsive design, for consistency. There are many articles on google for this so check those out. Basically, you can dynamically determine the screen resolution of the device the user is visiting with and serve up a css stylesheet with measurements for that particular device.

Good luck!
am in love with you. I can't hide my feeling any longer. Please want to be your friend
Re: Help With Screen Resolution Pls. by Raylight2(m): 10:30pm On Jan 06, 2013
Thanks, i now got it set on mobile when I used media queries but it then affected it's view on IE which shows that the version doesn't support media queries by loading the stylesheet for mobile instead the one i set for screen. How then do i apply these stylesheets to devices that do not support media queries.
Re: Help With Screen Resolution Pls. by Raylight2(m): 10:32pm On Jan 06, 2013
How do i use dynamic design? Pls tell me.
Re: Help With Screen Resolution Pls. by yawatide(f): 1:27am On Jan 07, 2013
You will need to sniff for that particular browser and not apply the media queries accordingly. You can sniff for it either on the front end (javascript) or the back end (PHP, JSP, etc)
Re: Help With Screen Resolution Pls. by Raylight2(m): 1:34am On Jan 07, 2013
Pls, can u give me the codes and tell me how to apply them to my page. Many thanks to u.
Re: Help With Screen Resolution Pls. by yawatide(f): 11:23am On Jan 07, 2013
one example:
http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
Re: Help With Screen Resolution Pls. by Raylight2(m): 12:34am On Jan 08, 2013
Perhaps i nid take a course on javascript. The copy and paste from that site didn't work.
Re: Help With Screen Resolution Pls. by Raylight2(m): 10:19am On Jan 08, 2013
@yawa-ti-de: these codes worked for me

<!--[if lt IE 9]>
<style type="text/css">
/* css documents */
</style>
<![endif]-->

What are the shortcomings of this codes if any?
Re: Help With Screen Resolution Pls. by yawatide(f): 11:08am On Jan 08, 2013
You are using conditional CSS to display certain styles for IE. What you are doing is displaying certain CSS code if the IE version is less than 9. The problem with this approach is:
1) What happens when someone visits the site with IE9 and above?
2) When IE9 becomes stable enough for use, what will you site look like on IE7 and IE8?

You should endeavor to make your code as generic as possible so that it is browser-independent. It is possible, though it takes a lot of discipline and patience.

Make sense?
Re: Help With Screen Resolution Pls. by Slyr0x: 11:18am On Jan 08, 2013
paddy4destiny:
am in love with you. I can't hide my feeling any longer. Please want to be your friend

Re: Help With Screen Resolution Pls. by Raylight2(m): 11:21am On Jan 08, 2013
IE 9 supports the media queries i wrote initially it was just those lesser than it that didn't support it.

I tested the conditional statements alongside the media queries on IE9 and IE6 and it was in order.

You should endeavor to make your code as generic as possible so that it is browser-independent
If this requires me using jscript, it's going to be challenging cuz I've no very little idea on javascript at the moment. The codes on http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ didn't work for me.

Can you pls give a sample of a generic code u used in any of ur projects?
Re: Help With Screen Resolution Pls. by yawatide(f): 8:39pm On Jan 08, 2013
slyrox: ROFLMAO! LWKMD!!

poster:
1) I would stop trying to support IE6. I already knew this, albeit without the numbers to back it up, but to support my conclusions, I read an article yesterday that said you add 20% of time to your development cycle by trying to support IE6. Besides, even MSFT doesn't want you to use it smiley http://www.ie6countdown.com/

2) You should aim for cross-browser support first. That means coding semantically. After that, you can deal with specific browsers

3) As a snippet, here is what you could do, if I understand what you need:

a) Make sure you use the meta tag that will set IE7 as your baseline: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />. This should immediately follow your HEAD open tag
b) Then you can have a conditional like so:
<!--[if gte IE 7]>
INSERT MEDIA QUERY HERE. Note that this is for >= IE7. If you wanted IE7 only, it would be [if IE 7]. Just remember, if you are too specific, when all browsers eventually are standard, some of your code-specific code may not work and you will have to go back and tweak, hence my earlier advice of coding semantically from the start
<![endif]-->

Re: Help With Screen Resolution Pls. by Raylight2(m): 9:41pm On Jan 08, 2013
Thanks. I did something similar earlier today, i used:
<!--[if gte IE 5]>
<link rel="stylesheet" href="my-style.css" type="text/css">
<![endif]--> it supported IE 6. I'l nid to add the meta tag.


I'm particularly interested in making my site support IE6 cuz commonly used Window XP makes use of IE6.

Do u have a blog, personal site or a fan page on fb? I like to be one cuz you've helped me so much. Thank u.
Re: Help With Screen Resolution Pls. by yawatide(f): 11:10am On Jan 09, 2013
1) I would seriously consider dumping IE6. Think of what I said above again - even MSFT doesn't want you to use it and it will cause you unnecessary stress. I guess you like to suffer
2) Something working in IE6 won't ensure working in IE7 (in particular), 8, etc
3) You can YIM me at yawatide and we go from there
Re: Help With Screen Resolution Pls. by Raylight2(m): 11:46am On Jan 09, 2013
All right. I'll dump it. Thanks
Re: Help With Screen Resolution Pls. by Raylight2(m): 4:58pm On Jan 09, 2013
@yawa-ti-de: this is a link to the site http://gadgetslim.com/raylight . it's like the stylesheet for mobile devices is missing.
Re: Help With Screen Resolution Pls. by yawatide(f): 6:23pm On Jan 09, 2013
I just viewed the site on my samsung galaxy tab and other than the navigation bunching up in portrait mode, the site is scaling well. To get rid of this, you need to use percentages for your widths. What I noticed was in portrait mode, the site didn't expand to fill my screen. Rather, it became "slimmer". That tells me that you are most likely still hardcoding widths somewhere.

Also, why do you have an IEMobile conditional? Is it not showing up well on windows phones? I've never actually seen this conditional so I'm interested in knowing what it's all about.
Re: Help With Screen Resolution Pls. by Raylight2(m): 7:00pm On Jan 09, 2013
I made the width 70% on devices above 480px. Or should I make it wider?
I decided to use IEMobile since I wanted it to look correct in all devices which I couldn't get in contact with.
Re: Help With Screen Resolution Pls. by yawatide(f): 7:05pm On Jan 09, 2013
1) Change from 70 to 100. You want it to fill up all screens naturally

2) Again, if you are implementing semantic code, you will rarely use browser-specific code. Also, you need to take advantage of progressive enhancement - it is not a must that a site look exactly the same in every single browser, on every single device. If it's not expected in cars, why should it be expected for websites?
Re: Help With Screen Resolution Pls. by Raylight2(m): 7:20pm On Jan 09, 2013
Ok. Thank u.

(1) (Reply)

How Can I Send Sms In Arabic Online / Pls Website Designer Guru Help / Check Out My New Blog Http://nicejams..com/

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 32
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.