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.
Related
I am building a website for me and I care about performance, speed, user experience and a lot more. When I started I didn't know much and I made an initial design using adobe xd. Then using webexport plugin I got a html file that has 2k+ lines of codes for scale to fit any screen and proportional resize of everything. I think I made a 1080p standard artboard but somehow it was way too big like 3554px by 2216px. So the webpage is now that big and scaling is running on it. I don't think it's too big for a browser to handle. Things were good before chrome 97 or 96 update. After that chrome and any browser running on chromium just can't scale my webpage fast enough to fit the screen. I see big divs getting smaller and it takes kinda like 500 ms to settle with decent setup. A lot of variables can affect the performance like if the machine(pc) and network is slow the scaling takes couple of seconds which is too much.
Is there any way to hint the browser to do the scaling first then make the page visible? The older version of chrome was doing it right. I can make the page visible after 600 ms using setTimeout function but doesn't seem what I want.
CSS
will-change: transform;
Tried this but it has bad effect like blurry text on my content. I don't know why it's pushing the browser to it's limit sometimes, maybe I can better optimize my page but these browsers should be more powerful (safari is the worst - can even render the webpage)
This is the home page
https://elomymelo.com/
You should see big page fitting inside the screen and it'll probable take 200 ms pretty fast
proportional resize on window also works
This is a heavy article page
https://elomymelo.com/oneplus%20nord%20review.html
I tried to hide the scaling effect in this page but not satisfied because browsers mess up sometimes. I need the javascript scaling done much faster like visitors will not see that weird transition.
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;
I'm new to the HTML\CSS\Javascript thing, so please excuse my incompetence. I know for some bits (mainly class modification) I'm not using jQuery, but only because I couldn't get it to work, so I went old-skool.
I have a web page (here: http://dashboards.kantarhealthspain.com/uk/segmentation/Segmentation_v0.4.html) that works just fine in Chrome (and Safari) on my desktop. You click on the massive squares in the middle of the page, and then click on the >> to go to the next 'page'. Eventually you get to the point where it hides\unhides one of 4 segments based on what you've chosen. It's a bit clunky, but it works, which right now is a win...
When I view the same page on an iPad, the layout isn't quite as good, but that's not my problem. When you get to the final question to show\hide the segments, it seems to change the way the whole page is rendered - every element seems to take up so much room.
Debugging on an iPad is very difficult, as I'm using a Windows machine to develop, and the Safari emulator doesn't actually emulate what's going on, as it doesn't break on desktop Safari (for Windows).
I don't even know where to start looking on this - any hints would be much appreciated.
EDIT: Now I've fixed the evil HTML, it looks like when the divs at the bottom are shown\hidden, the height of each div above doubles(?) I've made the background of NavDiv and Breaker fuschia and maroon so they show up, and the double in size. The height is a percentage of the size of the page (I presume) - what's going on there?! Does the percentage recalculate when areas are unhidden?
Thanks
Tom
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.
Has anyone built anything using the new "fluid canvas"?
Besides the sample code not working in IE 8, are there any other problems with doing this?
I'm wondering if I would be nuts to build an application using this? I mean, what would I do, check the available width of the screen and do different things for every user?
Isn't this prone to error? Any thoughts?
Thanks!
even for "fluid" canvas, it is very likely that we are not going to check the available width of the screen (as the screen/browser window can be resize dynamically by the user).
instead, as it is an iframe, it is exactly the same way how we should built the canvas / web page that meet our needs or show best to the user by making use of the full width of the browser window.