Consider this scenario - I'm developing web applications for use on a tv, they will ALWAYS be in full screen. As you may or may not know, each TV has a different 'safe area', because most cut off a certain amount on one or both sides. I'd like to use a web page that displays some sort of visual ruler so that I could easily see a tv's 'visible' screen, to find this 'safe area'. Does a web page like this exist somewhere yet?
If not, what would be an easy way (I'm guessing javascript) to draw an on screen ruler that could be used to find the 'safe area'?
TV safe areas are approx 5% margin from the edge of the screen on new monitors.
When I do projects with this kind of resolution involved I simply add a generic 5% margin on the main container.
Not all monitors have the same safe area... but 5% is enough for all moderns one.
Edit:
Look at this as well: http://dev.opera.com/articles/view/creating-web-content-for-tv/#safe-areas
it say exactly what I wrote previously.
Related
I'm trying to use Crocodoc to view documents on my site. The documents look good on desktop but their scaling algorithm is too severe leading to the font-size being too small on mobile. As an example, see this link and re-size the browser or check on your phone: https://crocodoc.com/view/92GF0fI39qf4YlCK18njk7LOaz6qtCuVVFQU5T1TbK-HARw_oJutfq7clutH5rYCEoV85rk9a05kdE-du4A9LdEaNIW0cORvFuQHlQ
update to include permanent link since session links expire after an hour:https://crocodoc.com/see-it-in-action/
The font-size goes from ~10em to ~3em as you shrink from ~960px width to ~320px width. 3em is too small to view on any device without zooming in which is annoying because then the document doesn't fit on the screen.
I'm not seeing a simple fix and am wondering if anyone hacked around with Crocodoc to know how to deal with this UX issue?
I think there is a slight misunderstanding here. Crocodoc does not scale text based on the size of the display. Rather, when a document is first viewed an effort is made to scale the entire page/document to optimally appear on the screen. Crocodoc documents are meant to be pixel-perfect renderings of the original document, rather than reflowed text like you would see with an e-reader. When you zoom in and out the scale of the entire document will change accordingly, just as it would in Preview, etc. Does that clear things up?
By the way, your link will no longer work since document viewing sessions expire after 1 hour.
I'm trying to write application on the Samsung Bada platform. I'd like to make this application be available on different screen sizes and here are problems with this...
I have to make it work on mobile devices like: Wave 3 GT-8600 (480x800), Wave Y GT-S5380 (320x480) and Wave 578 GT-S5780 (240x400).
As i understood, we have to add device we need to "Device List" into our widget in bada IDE.
In that list we can see different phone models... I'm looking for Wave-model (in the bottom) so i will choose it, but i'm looking for different screen sizes... and i have no choice.
Maybe i loose something important in bada ide?
Than i visit bada developers website and saw there 3 type of files:
HVGA, WQVGA, WVGA - this files are for various screen sizes, right?
i put them to the "bada\2.0.5\Model" folder, but this didn't help me too.. in the device list still no more devices.
does someone know how to add more devices to device list, or how to make to be able to choose screen sizes in that list or.. maybe another way to create one widget for different screen sizes?
Aw, yeah.. my problem is: height and width of widget on different screen sizes.
This properties we can set in project.xml file in the root folder of widget. At this moment i have the same properties of widget for all screen sizes (from 240x400 to 480x800).
I set 220width x 130height for widget, and everything fine at small screen (240x400) and middle (320x480) screen, but in the large screen (480x800) widget can be get out off the screen if you move it at the right angle.
Also we can not set sizes of WIDGET larger than SCREEN size, because after installing widget will automatically became application (some bada magic), when i need only widget.
That's why i'm looking for possibility to set different "project.xml" files for different screen sizes.
If you're targeting bada 2.0, you can do a resolution independent app, where the right resource files are pickup up automatically by the system based on the current phone's specs. You'd get an abstracted display surface that's always 480 logical pixels wide, scaling to physical pixels is done internally.
And for development purposes, there are only three bada device types out there - WQVGA (240x320), HVGA (320x480), WVGA (480x800). Those are resolutions, not screen sizes. Screen size is roughly in the same ballpark, about 4".
I have a wordpress site that is set to 970px wide and i built it on my mac that has a resolution set to 1920 X 1080 but when my client views it on his computer it cuts off some of the site. Below is a pic of what it looks like on his computer and what i want it to look like. I did some research and i found this code but it doesn't seem to work
<script language="javascript">
X = screen.width;
Y = screen.height;
window.moveTo(0,0);
window.resizeTo(X,Y)
</script>
I tried to explain to him that this is a variable that is hard to control since every computer could be set differently. Any Ideas or suggestions would be great.
Unfortunatly, this is a key design element that is normally done in the very first stages of making a website. a Fixed width (and if so what desired size) or a fluid (percentile) website.
You will run into no end of issues if wordpress plugin's are set to pixels, and you try to rearrange it to %'s.
The short answer to your question is that its not just as simple as bunging in one line of code which would give a variable to yoru css width for some element. Its going to be a process of testing the site against many different browser resolutions, and adjusting to suit.
Best of luck!
That line of code resizes the browser to match the screen size. You should still code a website for 1024x768 if you want it reachable by the widest audience. Either that or learn about fluid designs, but make sure it doesn't get too big for large screens like yours.
http://css-tricks.com/138-the-perfect-fluid-width-layout/
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.
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.