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.
Related
I'm currently pulling my hair out with this one. Im a new web developer using bootstrap themes and templates just to get a feel for the industry, and have hit a bump in the road that needs an experienced input
Ive got a website that Ive created at the minute, where certain parts of the screens don't resize properly when the aspect ratio is lower than mine (1920px). However zooming out on the browser corrects this issue. For instance 1440px needs to be zoomed out to 75% in order for everything to be correct. A number of images have fallen out of the bootstrap framework due to a positioning request from my friend, although ive used #media queries to correct a number of these issues but thats clearly where the problems have arisen.
I'm aware that I should go back and fix this bugs from scratch but I seriously will go crazy if I have to do that. I do know that it is possible to resize the browser zoom being used if the aspect ratio is below a certain level however Ive heard thats not the way to go.
Does anyone have any advice on how to proceed with this one? Is there an "entire page/html" zoom query that can be put in place rather than a browser zoom?
Use CSS zoom:
body {
zoom: 0.75;
}
If you're just starting out, I would recommend you right click on elements that are not appearing as expected, and inspect them in your Chrome console (or whatever browser you're on). You can then first adjust styling properties and transfer over the appropriate changes to your actual code once you confirm that the adjustments you make do what you want.
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 working on a responsive website and I'm so frustrated with finding a solution for this one.
this is the basic structure:
I used 'vh' sizes and when ever the URL bar slides up - the page changes the sizes of the elements and kinda "jumps", which makes a bad user experience especially when reading.
I changed the size of the second part (orange) to 'em's because I thought maybe it will not "jump" so at least where there are texts this will not happen - and I was wrong. it's still happening.
What I'm trying to get to is to make the first part (in baby-blue) opened on all of the screen no matter what screen size is displaying the page (but without making it "jump").
I'm very frustrated finding a solution to responsive pages, can you please help me solve this, or help me with some reading material that will help me solve this ?
Note: I found some codes to add that should remove the URL bars from iPhones and it didn't work :I
Since you've tagged Javascript/jQuery I'd suggest assigning the height by getting the height the specific element (eg: window, document or viewport) you want. A good comparison can be found here. From the looks of it, you might want window.outerHeight which may account for what's "under" the URL bar. On my desktop, it's the only value that's different from the rest but on mobile other values may be different as well.
document.querySelectorAll(".whatever").style.height=window.outerHeight;
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.
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.