I created a cross platform app using jQuery Mobile. When I test it on various browsers it works fine and displays all images with no problems. When I build it with Phonegap Build, transfer to my Android phone and test I have problems with some images displaying.
I have several similar pages where I display a picture on each page. The problem is that pictures display on some pages but not on others. I have ruled out file type as an issue (I am using .jpg, .jpeg and .png and I have at least 1 of each of these working fine) and I have ruled out the code as the issue as I have used working images on pages that werent displaying the image before to prove that it was the image itself at fault (the image displayed fine when I used one that was working from another page). I have also ruled out picture size, dpi and dimensions.
Does anyone have any ideas?
Related
I am now testing my website with an old iPhone. Some of the images are not shown in the old iPhone. However, the images are shown properly in other devices. I have checked the image format of all images(wheater they can be shown in old iPhone or not) and all the images are in jpeg. Why did it happen?
From another answer today: Try running this program on the images that work and don't work.
http://colosseumbuilders.com/sourcecode/jpegdump.zip
Check see what the difference is between the images that work and don't work.
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
I designed a Mobile-first responsive site www.designsbykyram.com
When previewing http://www.designsbykyram/photography.html in the browser, it displays properly with the design I created for it for all pages displaying on screens larger than 950px with LargeDevice.css, but only when live on the web, it displays as if it was being shown on a tablet and reading the css file for tablet sizes.
The page is configured Exactly the same way as the others , yet displaying differently only when live, what am I doing wrong here?
Of course I made sure the page was uploaded to the same folder online as locally since I just dragged and dropped the entire directory over to the web
This is a helpful image visually showing what the problem is:
You have a typing error in there use
<link rel="stylesheet" media="screen and (min-width:950px)" href="css/largeDevice.css">
remove capital L
Your local machines filesystem probably ignores capitals and the server does not.
I have a live site at http://www.factormedia.co.za
When you inspect it to phone scale (around 350px width or so) it loads 3 icons in the menu, of a house,laptop and notepad.
However if you had to actually use a phone the images do not appear. So trying to figure out why it is not referencing my font library from fontastic.com.
Works fine in a preview but on the actual device itself.
It seems when you embed using the link they give you works when testing and using anything from a laptop to a desktop, once you scale down it starts to give issues to mobile. To solve this issue the easiest way was to manually download the icons I was using and use them as their own custom font by installing it as the site instructs.
This then solved the problem and it now shows on smaller devices
i developed a new theme for magento store , everything is working fine except a new bug have occured , when the site is opened in iphone6 or iphone6 plus it shows repetitive images which are not even set as background images. The css properties they are inheriting are from bootstrap 2.
I have attached the img for reference moreover can't copy the whole lot of 8000 line off css here so it would be great if somebody help.
In dev tools, iPhone shows the right file name for the background, but its not the actual file at all. So the CSS is just fine, for whatever reason, iOS is sticking a random image in there and calling it by that file name instead of the actual image that is called that. Super strange:
iPhone 6 CSS Background Issue Screenshot