I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?
Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.
a simple listen on window resize would solve the problem:
$(window).on('resize',funciton(){
var self=$('#ur_id');
self.height( self.width() * (1080/1920))
})
You can use CSS #media queries for this
#media screen and (min-width: 1920px) {
/*Styles goes here*/
}
Or you can use media = projection
The design for a device supporting 1920x1080 resolution mostly is not applicable to a mobile device for example. Maybe you need to hide some elements (generally sidebar) or decrease the font-size, load a different logo... So the best solution is a responsive web design using #media queries as #Mr. Alien suggest.
Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
You can check some Guidelines and Tutorials at SmashingMagazine.
Related
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance
The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.
You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}
You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta
I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/
Im working with a graphic designer who constantly wants to make websites larger than the 960 pixels i recommend. I can do a certain amount with liquid layouts but id really love to be able to load different CSS for larger resolutions. I googled it and found the link below, but im worried that I havnt heard more about this. Is this is a reliable method? Im concerned as I would have thought that more people would want to do this.
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
Thanks
To simply answer your question: No.
Even if it was, it seems inefficient to build multiple CSS files, etc. There are better methods than relying on resolution.
A longer-winded answer:
When 960 becomes "oh, that's so 2010..." how many of your sites will look dated? At the same time, not everyone that browses the internet has a 30" Cinema display either, or a dual monitor setup. I try to design to best accommodate MY traffic.
Although it may be nice to detect browser window widths, and/or screen widths (monitor resolution), I think the majority opinion is this: Know your intended audience and design/build for it.
Building a 960 grid and a CSS, then building a 1024 grid and a CSS = Inefficiency, and not very "future proof".
If you're watching your site traffic and see that 90% of your visitors are using 1 or 2 (or 3) resolutions, build a fluid layout that works well for that audience.
Fluid layouts are probably the best universal solution to the ever-expanding array of devices, resolutions, viewport sizes, screen definitions (low, medium, high) on the market now -- let alone 18 months from now.
Checkout #media queries to add to a fluid layout/design. Modify one CSS file (not 3). http://www.w3.org/TR/css3-mediaqueries/
#media screen and (max-width:960px) {
h1, h2 { color:#990000; font-size:1.4em; }
}
#media screen and (max-width:1280px) {
h1, h2 { color:#336699; font-size:1.8em; }
}
Add min- and max- widths to your CSS (or a similar logic) can also help satisfy a wider range of resolutions/browser sizes, as well as give your design a longer shelf life. And doesn't rely on a document.window.width() function.
Get the most bang for your buck. Fluid designs, #media queries, javascript to help bridge some gaps. You'll end up with less code, a more "future proof" design, and a larger percentage of satisfied visitors.
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.