OK, so I'm building an application similar to the Battle.Net's launcher :) Tabs for multiple applications and I would have liked to add a "dynamic content area" where I could post news and stuff. Therefore I placed a WebBrowser there, set a width and a height and proceeded to create a static HTML file.
I am aware that WPF's measure unit is is not the pixel. Therefore, when creating the CSS for the HTML, I multiplied the WebBrowser's dimensions by 1.33 and used that for my HTML's body width and height. And it looked good on my work monitor. When I got home, surprise! Apparently my monitor works at a higher DPI value, therefore the image I had there was larger than the browser window, the text was way too big, etc. I did try switching to EM as a unit, but still no luck.
So, how can I create a webpage that will fit all kinds of DPI settings? Seeing as I can't really get the monitor DPI values (not reliably, as far as I have been able to read). Is it possible?
The other possibility that I have considered is to create a placeholder for an image and some text (WPF controls that is) and populate them from the server, but I may want to change the layout at some point, etc, therefore this doesn't really help me too much in the long run.
Related
Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
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 have a legacy web application that was written long before there were even mobile browsers, never mind responsive design. As such, everything is static.
I can't modify all aspects of the site's pages. For example, I cannot change that the main container is set to 900px with auto margins. But through other server-side output classes, I can modify bits here and there. For example, one class builds a <div> element with other nested markup, and I can add inline styles and attributes to any of this markup. I can also modify the header include to a certain degree. So what I'm wondering about options:
Right now, the whole page fits in the mobile viewport, making text tiny. Can I instead zoom in for mobile? I don't mind if you can't see all the content but at least fonts are at a readable size. Is there some CSS or a meta tag that I can use to zoom by default? (desktop browsers must remain the same as they have always been, though)
If I have an iframe within a page that is, say, 320px wide, is there a way that will allow me to automagically focus of that iframe on page load so that it fills the width of my mobile viewport?
plain JavaScript is an option (no external libraries like jQuery); if this can't be done with a tag or with styles, is there a JavaScript method I could employ?
I apologize for lack of sample code... I've certainly tried a few different things with CSS properties, but no matter what I'm always viewing the zoomed out full-page version.
To make sure your fonts are readable you could use a font-size per percentages instead of pixels if thats what you are using.
View this article about adaptive design for mobile if this helps :
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
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/
My boss is running a laptop which has a setting which is resizing font sizes and making them larger by about a third. This is fine but we have a java app running on the site and the div tags are being pushed off of the page because of the increase in font size. Is there a way to stop font being resized, via code?
Thanks, R.
Depends on the browser, but most use zooming now: see this article: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html
I do not think you can stop this, nor should you. What about people who need to larger font size.
It sounds like the problem is in your DIVs, not in your fonts. Unless your text contains huge strings with no "breaking" characters in them, a DIV should merely set itself to its parent's width as default behavior.