I'm trying to implement retina.js plugin but experiencing a weird issue.
When checking my website with my ipad it seems that the scripts detects that this is a retina screen as it display the #2x logo picture, but instead of displaying the logo with the same size as on a regular screen but with more pixel density, it displays the logo with 2x size. Any idea what the issue is? Many thanks
I think the issue is your image. The normal image has more padding than retina image. If you can equalize the padding of retina and normal image I think It will be ok.
Related
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.
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.
I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.
I set custom image on drag'n'drop start:
var dt = e.dataTransfer;
///...
dt.setDragImage(img, -20, -20);
But image quality for Retina is not good.
Usually, workaround of images quality for Retina is to make the image twice bigger and then either to "stratch" background (with css) for 100% or just to set canvas size twice smaller than its real content drawn.
But that does not work for the drag'n'drop image because the size of the image is the one which is shown on dragging as is, so I can do nothing with pixel rate.
Could anyone help on that? At least, definitely confirm, that that's not possible to solve with current browsers technologies level?
Thank you!
P.S. There is also some related topic with this drag'n'drop approach:
https://stackoverflow.com/questions/14834181/dynamic-image-created-from-canvas-by-todataurl-on-dragstart-event-does-not-s
I'm trying to resize my wrapper, so when viewed on iPhone, iPad or computer 100% of my site is in view. I have placed pictures in my scroller using the <ul> and <il> methods.
At the moment everything is in view on my computer, but on iPhone the pictures are getting cut off. It's letting me scroll horizontally and vertically my pictures, but need to resize the wrapper so my pictures are smaller.
Any help would be amazing. Cheers in advance
You didn't provide any codes, so these maybe help you:
Set proper width/height to your wrapper when browser resizes and window.onload. Because we don't know device is in landscape or portrait mode until window.onload. Here better explained how to get resized browser width/height.
Check your images width/height. Maybe images' dimensions wider than wrapper. You can set width/height to image in percent.
And don't forget refresh iScroll when browser resizes. You can do it like that:
setTimeout(function(){myScroller.refresh()}, 400); // browser need time to rotate