I hope the title makes sense. Making an element with a set width and height, I found out that it's much smaller than I expected on mobile and also on Chrome's responsive view on the dev tools.
The reason seems to be that apparently even though a screen is supposed to be, let's say, 320px wide, the body of the webpage is over 900px wide and the width of my element gets reduced accordingly. On desktop devices that doesn't happen and it works alright.
This only happens in some webpages and I don't know the difference. What I'm making is an element that is supposed to be embedded by copy/pasting the code so I can't fix the code of the webpages, just the element itself.
What can I do and why could this be? Thanks a lot.
Related
I am trying to get comfortable with responsive web design, using media queries to adapt my layout to the current size of the browser viewport. I have noticed that in both Google Chrome and in Firefox, when I drag the right-side border of my browser window to the left to make the viewport narrower, there is a point where I am no longer able to make it narrower. This often prevents me from testing my media queries for the narrowest widths. When this happens, I have found that the browser developer tools allow me to set the viewport width as narrow as I want. This isn't a significant problem for me, but it made me wonder what determines the narrowest width that a browser (either Firefox or Chrome) will allow you to resize the viewport to when not using the developer tools? Is this a browser setting?
If anyone can clear this up for me, I would greatly appreciate it.
Thanks in advance,
Paul
Screen Size unchanged on Mobile
Briefly explaining this, I have a Chat App that works well on a desktop view but when we go into mobile it seems that the device simply mimics the size of the desktop screen (ie: on my Oneplus 6 the <html> tag is around 4000x2000px). I'm quite new to HTML mobile scaling so forgive me if the wording for this isn't to par with what's expected.
Continuing, on my desktop if I manually change Chrome's window size my webpage scales perfectly while on my mobile device it's huge as said in the previous line. Would using the #media tag in css help specifically for this? If so, how?
One last thing, if I zoom in manually on my mobile it obviously looks perfect as it's meant to fit the new tall aspect ratios. Which is ultimately what I wish to do, just need to keep the website scaled perfectly like on the second picture (picture B).Image B
I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
I have this site. It fits prefectly in resolutions like 1366/1360x768, 1280x1024. But with res equals or lower than 1280x768 it doesn't fit horizontally and of course a scroll bar appears. Is there a way to automatically "zoom out" or some workaround without having to use media queries to reduce image sizes and div widths?
EDIT: I changed CSS a bit to be able to view the website fine till a res of 1024x768. Anyway the question is still valid (not the example link though).