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
Related
I'm developing a personal portfolio website for myself. I've planned to build the website as a responsive one. Starting from smartphone (720px x 1280px) until a Desktop resolution. But, I've just finished the Mobile Smartphone size only. Even though I've done the viewport and media queries, when I tested it on my smartphone which has 720px x 1280px resolution, the output is bad. This is also happening when I resize the PC Browser windows to 720px x 1280px. But, oddly, while I was working, I always checked the update in the Inspect Element features in PC Desktop with frame size: 720px x 1280px and it works really well. So, I'm rather confuse here, where's the problem exactly?
Here's my source code:
Can anyone help me? Thank you very much
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 developing an Android app using Cordova in which there are multiple font-icons used. I used media queries for different screen sizes to set the font-size for the "body" by percent. I also added queries based on orientation to try and make it responsive for orientation-change. But still the icons look oddly smaller or larger for different screens as there can be tablets as well as mid-sized phones that can have the same resolution. So my question is, is there a better way to make my font-icons responsive regardless of the screen size, DPI, resolution? I'm using Fontello font-icons.
so, I want to do a "mobile" friend view of my site. Its liquid designed already, but mobiles need definitely different look. Now, how to detect if I visited it with mobile (iphone, ipad, android)? More specifically, I imagine it as if the screen width is smaller than a value (dunno that value), then thats considered a mobile client. How to detect, so that generate the mobile optimized CSS/HTML outputs? Maybe im too simple, but to me mobile client = smaller screen, and nothing more
There isn't really a great way. Before you used to be able to say if under a certain number of pixels then it is a phone. But now phones are getting both higher pixel count but also crucially large screens too. Tablets are as small as 7" now, but they could get smaller. Some phones are over 5" and could get bigger. Then there are things like physical pixels to css pixel ratios to think about.
If not screen size or pixel count, maybe it could be if it supports touch or not. But Windows 8 threw that on its head, as that supports touch on the desktop.
I would say it depends on the content rather than the device. Test your site using various widths. See when the width becomes sub-optimal for the content, and throw in a media query there to adapt the layout. I think a content first rather than device first strategy is more future proof.
Also remember that it may not just be a mobile that wants your mobile friendly layout. For example soemone could be using their browser in a small window, rather than full screen, or they could be using the snap mode in Windows 8, where the width is the same as a iPhone width at 320px.
Use media queries. Then you can detect if you are on a mobile device the browser will load the mobile CSS and if you are on a PC the browser will load the PC version of the CSS.
http://www.w3.org/TR/css3-mediaqueries/
Then you can develop the mobile device CSS like this way (supose the mobile have 480x640 pixels):
#media screen and (max-device-width:480px){
...
put your mobile device CSS code here
...
}
Supose you want develop CSS for tablets (1.024x768pixels)
#media screen and (max-device-width:1024px) and (orientation:portrait){
...
put your tablet device CSS code here when tablet has portrait orientation.
...
}
#media screen and (max-device-width:1024px) and (orientation:landscape){
...
put your tablet device CSS code here when tablet has landscape orientation.
...
}
And for PCs (1280x968pixels):
#media screen and (max-device-width:1280px){
...
put your PC CSS code here
...
}
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