Created a website, looks pretty solid on the desktop. (http://foo.com) Used an .htaccess redirect to send those using mobile browsers to subpage (http://foo.com/m.html). Redirect is working like a charm.
My problem is that one image (and for that matter, the background color) doesn't display on the mobile page, on any mobile browser. I've tried reformatting it (.png, .jpg, .gif), resizing it (down to 55p x 44p). It is the only image on the page. I've tried using a css stylesheet specifically for the mobile subpage, I've tried not using a stylesheet at all and simply putting the image in the body. Nothing works. I've searched for an answer but all I can find is 'why doesn't my wallpaper display on my mobile phone', which doesn't help at all.
Anyway, if someone knows what I'm doing wrong, I'd really appreciate it. Thanks all!
I've got the same problem, I've done a very simple page, with a single image inside, surfing there with desktop was all right, while going there with a mobile makes the image invisible, it takes the place, but without display, like with "visibility:hidden";
after some tries, i've noticed that the image was saved in a CMYK color space, I've converted the image in RGB color space and then all goes right.
mobile browsers seeams to not manage the CMYK image versions...
Look at CSS part:
background-image:('background.gif')
Do You think all is OK here? Because I think it's not...
https://developer.mozilla.org/en/CSS/background-image
Related
I'm currently trying to test out this new css rule, which fixes the blurry retina image downscaling in Chrome.
I described the problem in detail here: Blurry downscaled images in the Chrome 84
The rule I applied to my img tags is this: image-rendering: -webkit-optimize-contrast
While it fixes the blurry problem in Chrome, I heard that it can mess up how images look in Safari. I'd really appreciate if someone who uses Safari on a Retina display (laptop) would check if images on this site are displayed correctly (nice and sharp). There should be no ripped/grainy edges or anything like that.
Looks good to me.. Would comment, not enough reputation points.
Images:
I had a logo made by a freelancer. At first the logo looked great and I was very happy. But now I started to use the logo in different sizes the problems started.
The freelancer that I used doesn't answer anymore.
**Problem **
Logo on iMac, with Retina screen, looks not that bad
But in Chrome and on Windows it look really bad.
What can I do to make it look better?
This is the original design.
I've converted your png to an svg with Illustrator.
http://svgur.com/i/17o.svg
It should scale without pixelating or aliasing. Though I don't know if your website system can upload it as a logo.
It can be added to html like an image, make sure to specify the size.
https://jsfiddle.net/b1mhm5g6/
<img src="http://svgur.com/i/17o.svg" width="200">
You can use simple website!
http://pngtosvg.com/
Upload your pic!
Select 3 colors!
Download the output file and use it for any business purposes for free!
I have a window.open code to launch inappbrowser on phonegap. I use it for displaying image.
This inappbrowser has EnableViewPortScale=yes, so it's totally zoomable.
However, it seems like there is zoom-out-limit in inappbrowser. Here is the code.
window.open(myFullImageUrl, '_blank',
'location=no,EnableViewPortScale=yes,presentationstyle=pagesheet');
It's already zoomed-in a little. I can zoom-in-and-out because of EnableViewPortScale=yes for sure.
However, it seems like there is zoom-out-limit.
when i load up 1024x768 photo, it doesn't show fully zoomed-out photo(on both iOS and Android), but it's like 120%-ish already zoomed in.
I Just created stackoverflow account, so i can't upload photo. sorry!(it says i need 10 reputations to upload image)
There is no true solution for this issue.
So what I did is I just continue using inAppBrowser, but just instead of directly loading image from Amazon server(that's where I stored all images), I just made my window.open to go to another my URL and attach that url as a parameter after '?'.
The reason why I did this is because then I can force the Image web-view to have brief Javascript and CSS to render this dang-image correctly.
And as you guys know, this page must have meta-data that allows user-scale true, and must NOT have max-scale value.
So, Yep. Long story short, If you DIRECTLY load up the image in the inAppBrowser of phonegap, there is NO WAY you can force the image to start with 'not even slightly zoomed-in, but perfectly zoomed-out to the max'. Your own Page, Your own JS and CSS is the way to go guys.
I'm a newbie in developing on smartphone. After a short research, I choose BlackBerry WebWorks SDK.
My Device is 8530 (CDMA), Internet Connection through WiFi.
On my index.html, I need to show image with src from external link, for example
<img src="http://www.domainname.com/img/example.jpg">
No Luck, it won't show up. If the source is local image, it's work fine.
I already change the <access uri="*" subdomains="true"/> on config.xml also the image still don't show up.
Looking the answer on blackberry and stackoverflow forum with no luck.
Please help.
I would expect that the uri="*" access element would show the image. Another recommendation is to explicitly white list the domain that your image is coming from, like this:
Can you confirm that your page is loading fine, but its just the image that isn't appearing?
I was looking at the thumbnail image in a Shutterfly rss feed and the link is
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000039100AYtWzNi4Yt2Qg
and this renders out a ~3KB thumbnail, as expected.
I compared it to the link to the image on the actual Shutterfly page, which has the same apparent link:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000035100AYtWzNi4Yt2Qg
But when I click this link, it renders out a ~60KB image.
I've looked at this in Fiddler and Chrome Dev tools and can't see anything different in the requests that would tell the server what size to render. I've even tried copying these links into Firefox to see if it was a browser/cookie type issue but they render differently there too.
I'm driving myself crazy trying to figure out what's going on. Can anyone shed some light on this?
The two websites are different.
Thumbnail:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000039100AYtWzNi4Yt2Qg
Original:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000035100AYtWzNi4Yt2Qg
I opened both links in different tabs in Chrome. Then, flipped back and forth between the two tabs, staring at the URLs. There was a minor flash where the 9 changed to a 5, and vice versa.