I'm currently developing a website. I'm using an img in HTML file with dimensions 1466x530. It works fine on laptop (1366x768) but it is kind of zoomed in desktop (1024x768). Also the pages that were perfect in laptop resolution are zoomed in desktop. Could you help me please.
.center-shadow {background:url(../images1/center-shadow.png) center top no-repeat; }
Yes It happens, because 1480x530 is bigger image for 1024 resolution hence it looks zoomed and same goes for fonts which you have sized in pixel units it will tend to look different sizes in different screens.
if you want to show your site in same proportions in all screens you must use Media Query or setup such way it looks best in all screens.
Thanks
Manoj Soni
Related
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 am currently working on a template for a webpage and I'm currently working on the responsiveness for it. I have the desktop version and the mobile phone versions working just fine. The problem that I'm having with it right now is I'm trying to make a version for tablets. The "tablet" I'm using right now is a surface pro which has a 96 dpi. My desktop has and older 1080 monitor. So when I open chrome up with dev tools on the surface the pixel width is the same or close to my desktop but is looking completely different. Text that is on a single line on the desktop is on two lines for the surface and not all is showing. The reason this is an issue is that this is the header of the page. At full width on the surface it's acting more like half width on the desktop. I thought it might be because the screen for the surface is higher DPI on the surface but not sure. Is this what is causing this and if so how do you fix it. Setting a media query of say 800px for tablet works for say desktop and some tablets but doesn't seem to be working for something like a surface. So is there a different way to set up width? I have code of the site but I don't think any of it would be helpful. If needed let me know.
Try using vh(viewport height) for height and vw(viewport width) for width, it uses percentage of the window. 100vh would use 100% of the window height and 100vw would use 100% of the window width. It's better than using pixels and requires less work to make the page responsive, pixels are inconsistent and break easily.
I'm new to the world of web design and I've started with HTML and CSS. I've begun by building my own website from scratch and I'm currently stumped with how the design scales across different platforms.
When viewing my website on an iPhone 7, which is listed online as having a resolution of 750 x 1334, my inline-block images are able to sit next to one another in rows of 2. I don't understand how this is possible when they are set to have a height and width of 400px. I've attached a developer screenshot from chrome dev tools to show further. Developer tools showing the issue
Do I have a misunderstanding of how iPhones display content? If the maximum width resolution is 750px (and only 375px according to chrome dev tool...) how is it able to display 2 400px images side by side?
iPhones have "Retina display" which have a higher screen resolution than the "logical" resolution that you see in dev tools.
The image (content of the whole screen) is first rasterized, after that downsampled to the screen resolution and then displayed on the physical screen.
For the iPhone 7 model (and 6 and 8) scale factor is 2.
These models have screen resolution of 750x1334 and logical resolution of 375x667.
You can find resolutions for other models here and more details here.
As for the 2 images with width of 400px displaying on the 375px with screen side by side seems like a viewport zoom "issue".
The of the html is not visible on the screenshot, but the "jumbotron" class on the suggests that you used bootstrap. Perhaps you have unintentionally set the viewport when you where setting up bootstrap.
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML
i am learning web designing this days and come across the following problem, it will be my pleasure if you can solve it.
While designing a site i placed an image in background it looks nice on my system but on other big screens image looks small and shows white space around it so all that i want to know is what size of image i should select and what properties of css i need to apply?
for more infomation i am using 15" computer screen n problem occurs when i view my site on 17" system.
Waiting for your reply.
Your 15" screen is probably running 1024x768 resolution which is fairly small compared to the most common monitor sizes you will come across. I did a quick check in Google analytics for the most popular browser sizes wider than 1024x768 and came up with these common sizes -
1280x800 (typical widescreen 15" laptop)
1366x768
1280x1024 (typical q7" and 19" monitor)
1440x900
1680x1050
What I usually do is select a pretty large image, then do a radial gradient fade to the background color. Depending on the complexity of the image, I will often use an image that is 1600px wide so that it covers all but the very largest screen resolutions. Then place the image centered at the top of the page. Here is the CSS -
BODY{background:URL(image/url/goes/here.jpg) center top no-repeat;}
With a little practice you should be able to make the image blend in to the background nicely so it looks good on very large screens as well.