I'm developing a ReactJS PWA. When I load the URL from my desktop and android, it works totally fine. But when I use iPhone, it shows a blank with a background image that I set to body tag. But it's blank.
By the way, I've used npx create-react-app for my project.
Can you please tell me why this is happening and what's the solution?
Related
I'm developing an android app using ionic, I created a new app with side menu , when i run the app icons appear in the web browser and in simulator but don't appear in the my android device (oppo A5s cph1909 with color os5.2.1) i also tried with other mobiles like samsung and other oppo it works fine .i also tried before an svg image i got a bad structured image in the android device (oppo A5s).
Any idea?
I am building a website in a specific builder for a client and I brought in a small background hero video, hosted on AWS s3.
It works totally fine on Safari on Mac OS and iOS but for some reason it will not display on Google Chrome for desktop or mobile.
I am including a link to show my process of building that way you all can see exactly what's going on:
https://share.vidyard.com/watch/x4Jc39b2HvFKdiGEp9WQMY?
Also here is a link to the actual site. https://app.getocta.com/v2/preview/4QDIYFuUHsn81JT2Pdmh
I am replacing a div in PhoneGap android application.
Both below codes work in browser, but code 01 not working in the device.
Code 01 (Not Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('<img class="img-responsive" src="images//2000.jpg">');
Code 02 (The Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('Hello World');
Why Code 01 not working in the device? How I solve it?
Additional question :If I getting this type of question (working on browser, but not working on the device) how should I debug it on the device to know whats going on?
Update
Carsten Løvbo Andersen suggested to add the ALT tag to image. So I add the ALT images. Now in device it display the value of ALT tag instead of the image. But in browser it display the image.
To debug on a device get yourself an android device, personally I use a HTC M8, this allows you to USB into your PC and by using the chrome browser and using the URL chrome://Inspect you can view the html and scripts of the application, like you are using debug tools on chrome.
*EDIT
I am not 100% clear on the issue you are facing but remember the routing on a device can sometimes differ, make sure that your image path is correct.
For example to get my images working on my latest application i needed to use
<img src"~/Content/images/image1.png">
Try adding the ~/ followed by the directory.
I have built an game using HTML and javascript that I want to turn into an ipad app.
I have been following this "Creating a native 'Objective-C' app" section of this guide: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
However, when I run the ipad simulator in Xcode, the "ipad" comes up, but it just shows a blank screen.
I took out all my code in my html file and just put in a couple of lines of html. When I change the background color, this does show in the ipad simulator.
However no text shows up.
Does anyone know what I'm missing?
I am using Xcode 3. Also, I have already taken my javascript file out of "compile sources" and placed it into "copy bundle resource".
I don't know about your problem but an easy way to create an HTML/JS app is to use PhoneGap. Plus you can bring your app to other OS like Android an a PhoneGap project is really easy to set up.
http://phonegap.com/start
Issue
I have a strange issue with jQuery Mobile wrapped in Phonegap on iOS. My app consists of two pages, the second page being AJAX-loaded. On both pages I have images with a relative source like this
<img src="../images/myImage.png" />
On the first page, the image is displayed correctly. On the second page, the image is not found.
Explanation
I checked the src of both images with Weinre. It seems like Phonegap uses the data-url of the jQuery Mobile page div as prefix to the relative source. This works on page 1
file://path/to/app/html/../images/myImage.png
but not on page 2
file://path/to/app/html/page2../images/myImage.png
Why does Phonegap use the data-url on iOS?
Environment
What confuses me is that this problem only occurs in iOS Phonegap. It works fine in any browser and in Android Phonegap. It is a very basic "Hello World" like app with a standard jQuery Mobile page.
Solutions
I tried using the base tag, didn't work. I tried setting up the project again from scratch, didn't work. Any ideas?
I found the answer myself. Apparently jQuery Mobile identifies linked resources as external, if they don't have a file name suffix like ".html". My files were named without any suffixes.