How to prevent scaling of images on mobile devices? - javascript

I've been having a lot of issues with displaying images on mobile devices. It has something to do with pixel ratios and scaling.
The idea is that I want to prevent billiniar filtering on my images. On desktop this is easy, just display the image at 1x, and it looks perfect.
There are some issues with desktop, such as when you try to scale up using the browser it filters the image, but you can at least upload a scaled version and it will look perfect.
Here is my test page: http://stage.samkeddy.com/test/
You can see that all but the second one are perfectly crisp.
But here is what it looks like on my phone: http://imgur.com/a/4rMKj
It's not even close to the right size. The image should be 70 pixels wide, but it comes out to either 53 or 63 pixels wide (one is page loaded, second is after double tapping).
I want my image to line up exactly with the pixels on my phone, is there a way to even achieve this?

Actually you should forget pixel in mobile device, like android, the screen density is barely same, a picture looks different at different density screen.
I suggest using some responsive design, use min-width parameter for a img tag, and the image from server side should big enough to prevent blur.
There are also some image service which provide scale function, you can add ?w=100&h=100 to thre image url for compressing a big picture to a small one.

Related

Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work?

I was having a hard time figuring out how to phrase this. Sorry if this is a noob question, I'm new to responsive design and mobile web design in general.
My phone (Galaxy s10e) will render my webpage as if it's 360 pixels wide, with all elements positioned appropriately based on this width. I have several image tags on the site that are the same width. I was using src images that are 360px wide, and this looks fine on desktop because it is actually rendering my images at 360px, but on mobile the images alone appear to be rendering at a much higher resolution, causing it to look terrible due to upscaling.
If someone could explain to me what is happening here it would really help, since I can't find information on this specific behavior. Some questions I have:
Is the browser choosing to position the elements based on a 360px width while rendering the actual content at the screen's resolution?
How do I account for this in my design? I considered rendering the images at the higher resolution and then having the page dynamically scale those images down (so even though the actual div is 360px, the browser can use the 'extra space' allotted by max-width to render the image at a higher resolution), but I want the images to remain 360px wide on desktop, not the higher max-width for mobile rendering.
Where can I learn all about this behavior so I know how to tackle responsive image scaling in the future?
Thank you for your time. Let me know if you have any other questions. I'm using ReactJS to develop the site.
OK so in a nutshell pixels are relative sizes. One pixel is not literally one pixel on your phone.
What happens is PPI kicks in and basically zooms in to make things readable.
Because if you actually tried to view 360px on a phone with that pixel density you'd see nothing really.
So lets look at some phone specs:
6.1 INCH
5.90 x 2.77 x 0.31 INCH
Resolution 1440 x 3040 PX ~ 550 PIXELS PER INCH
Viewport 360 x 760 PX 138 PIXELS PER INCH
Now the viewport is what you actually see on screen. in this case it give you a pixel ratio of like 4. So that means your phone has a resolution 4 times that of it's viewport.
so for a web app where a div is set to 200px wide it will display 200px as you'd expect it based on the viewport but this div is actually 800px wide relative to your phones resolution.
Now pictures don't need this limitation. Whats the point in a high res display if your pictures only display 200px with a pixel density one fourth of your screens capability.
So a picture lives in a dual reality on your phone. It has a box size which is the size of the image relative to your viewport but the image itself inside the box lives within your resolution relative to your devices total screen pixels.
So when you have and image that's 200px in the viewport its display resolution is actually 800px. So when you put a picture that's only 200px and have it on a screen that does viewport scaling which nowadays is pretty much everything you're effectively stretching that image to four times its actual size. or what ever the screen pixel density ratio to viewport is. AKA it looks like crap.
And to answer your needs on this I'm just going to direct you here to MOZ who will go over the whys and how's as well as show you what to do to combat this.
Moz on Viewports
Combating element position is pretty easy you just use :
<meta name="viewport" content="width=device-width, initial-scale=1" />
In your <head>,
Moz on Image Scaling

Prevent Image from being resized using Javascript

I'm putting together a site for work using Wix. Currently, the page I am working on has an image on it that is meant to be used by the user to find out what size of disposable gloves they should purchase.
The issue is this image is resized on computers with a smaller resolution. I need this picture to remain at its exact size no matter what the size of the desktop monitor.
Is there a way of accomplishing this through Javascript?
Layout should be visible by link. Thanks!
You do not have access to CSS/HTML on wix (for this context) so the only way you can control image dimensions is using the fitMode property of the image.

HTML-- Faking the size of the browser window (to be smaller or larger)

I'm attempting to make a page that will be compatible both with a PC browser and a browser on a phone.
Essentially, I want to size my elements as large as I can on the smaller screens (ideally, even a little bit larger), while confining everything to a narrow vertical band in the center on a PC browser window.
You can see the look I'm trying for here:
http://www.hoggy.com
I've attempted to read the browser's width to tweak the data on the fly, but I find I cannot get a reliable width on all platforms.
So I've attempted to center things, and make the image and table sizes be a percentage of the page size... but on a phone it's too small (thus I would like it to be actually a little wider than the phone screen) whereas on the PC, I want my width to be, effectively, min(100%,500px).
Is there any way to do that?
Simplest answer:
html
{
max-width: 1024px
}

How to change the src of an image based on user's screen size

I have a website that displays a photo gallery of pictures for the end-user. I want to make the website fast in uploading images based on the user's device size.
For example, if they are on a desktop with a high pixel ratio, the image displayed would be a very large high quality image. However, if they are on a mobile device, the image doesn't need to be large pixels, and instead the website would produce a significantly smaller sized image.
Please note, I'm not attempting to resize an image based on screen size. I want the website to produce the same image but different file sizes. Even if that means me uploading 10 different sizes of the same image to the server. I'm guessing it means changing the scr based on screen size.
Hope that makes sense, thank you for your help!
try this
#media only screen and (max-width:600px)
{
.class
{
background-image:url("src for maximum 600px");
}
#media only screen and (max-width:1200px)
{
.class
{
background-image:url("src for maximum 1200px");
}
Why dont you have a look at media query in CSS...
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I understand the translation of what you asking : "i need content optimization". Yes using eg: php + gd you can store versions of your one pic to different sizes .there is no logic to send to a android device with the screen 800 x 600 px a resized 4800x 2000 px to
so
upload an image to a folder
https://www.w3schools.com/php/php_file_upload.asp
2.resize that image using a modified version of Resize image in PHP in how many sizes you like
3.detect user's screen size
How to detect the screen resolution with JavaScript?
4.on a if else parser decide witch version(size) will be better to put in
load an image after clicking a button
done! :D

Image Reposition on Mobile Devices

I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesn't scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then.
The problem is to do with:
$default_cover_width = 918;
$default_cover_height = 276;
As the screen size changes the default cover size changes as well...
I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well.
Thanks.

Categories