I'm currently learning ionic by making a 4chan reader for mobile. The thing is, the images that i want to show from api won't show up on mobile but shows up on pc. Well, it usually doesn't show up on pc either (because of the hotlink protection 4chan has), but since i added <meta name="referrer" content="no-referrer"> in index.html it shows up now on pc with a browser.
Now obviously, adding that line doesn't work when i'm running on my phone. Is there any other way to bypass this thing?
Related
I am just beginning to dip my toes into the PWA waters and have started by playing with the manifest.json on a site I am building. My goal is to get it to open up in fullscreen.
I am getting some very strange behavior on iOS.
I add the PWA to the home screen fine and it correctly uses the short name as specified by the manifest. But when I try to open it things go off the rails. The app seems to attempt to load in fullscreen per the manifest but then stops and the website instead opens in a new Safari tab, twice. I have two new tabs both pointing to the URL of the PWA.
Does anyone have any idea what is causing this strange behavior?
Hopefully this is not too late for you.
I had the same problem and I realize it is course by manifest link tag in the header:
<link id="manifest_link" rel="manifest" href="/manifest.json">
The moment you have this, any link or redirect from your PWA will launch Safari regardless of internal or external link.
One solution is to have the link remove from header with javascript after you load the file:
var manifestlink = document.getElementById("manifest_link");
document.head.removeChild(manifestlink);
However that might course some issues for android. You have to test your scenario with on both thoroughly.
I have a test WordPress website hosted locally by my PC. This is fine but i am now wanting to test the website on a phone and tablet (iPhone and iPad).
I have looked online for all the options and i can't get any to work (changing the httpd files and i have tried everything else) I can type my IP address of my PC with the port number added at the end and this takes me to the Xampp control panel page but i cant access my website by typing 'IPaddress/websitename'.
Can someone please give me a full step by step of what i need to do to be able to see my locally xampp WordPress website from my iPhone and iPad.
Your phone is probably not on the same network as your PC, and you might not be sharing your XAMPP website over the network. It would be possible to make your website available to your phone, but it is likely to be quite a lot of work, and might be insecure.
A better idea would be to shrink your desktop browser down to phone / tablet size, and check the layout that way. You can even throttle the internet speed, to simulate slower connections, and choose specific device models. On Chrome, this is called device mode. You will need to turn on Chrome developer tools first, which is done by clicking View -> Developer -> Developer Tools, in the Chrome toolbar. You will see a little icon there (see the link for a screenshot).
If you are going to make the site live, you should still probably check it with a real phone / tablet, but for the first steps, using 'device mode' is a good place to start.
I've added some media queries to my site here, which show correctly when I minimize the browser's window to the smallest size. Though unfortunately, when I navigate to one of the internal pages, the original design shows on the iPhone. When testing it in my browser, the site works properly regardless of what page I'm on.
Note: To test, minimize your browser to the smallest width which will show the "mobile site" that they wanted.
I'm completely stumped here. Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
Thanks!
Make sure you include a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
You probably answer your own question. This definitely seems like a caching issue because I see the same site on both my mobile and desktop browser.
Try clearing your mobile browser's cache. If you use Safari, go to Settings > Safari > Clear cookies and data. If you use Chrome, or any other 3rd party browser, you can usually clear local files under the in-app settings page.
I have learnt some basics about developing iOS apps and curious to learn more. I recently came across the way websites are displayed on mobile and was willing to know as to are there are particular design patterns/methods supporting it. I tried opening walmart.com on mobile which gives same display of the website as on the screen, but if I open homedepot.com; the view I get on mobile is an optimized one.
How does this work? How do I get same/optimized display for different devices i.e. desktop screen, ipad or iphone??
There are several ways:
use the browser agent information and serve the customized files (html, css, js, etc) for that client (Generally, not recommended)
use the browser agent or screen-width to redirect to a mobile-specific site (what a lot of sites do; relatively easy)
do responsive design, which essentially uses screen-widths and css to custom the display of a site, This also has a nice side effect of responding to window resizes for a desktop browser. But this method requires more work than a mobile-specific site.
Any of the methods above usually require some mobile-specific things, such as meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells the mobile browser to set the page width to that of the screen, and prevent zooming.
For responsive design, you can use a css framework like 320-and-up to help. It's also a good reference to see how various mobile stuff can be done.
For a mobile-specific site, something like jquery-mobile can help a lot.
You can detect the type of browser that's loading your page and redirect to your mobile-optimized URL. You should probably make both the mobile-optimized and the full version of the site accessible to mobile users (see: www.progressive.com).
Google something like "iphone optimized website tutorial" to learn how.
Sorry for the long explanation. Thanks in advance to all who are taking their time.
I am an Ubuntu user who has set up Titanium Developer on a MacMini in order to build an app for the iPhone (and ultimately some other platforms).
Rather than having any local code built in, the app simply points to my website. To do that, all I needed to do was change Titanium's tiapp.xml file to include my website URL. I wrote no other code, nor did I need to include any other files. It simply compiled and ran in the emulator without a hitch.
I've got just one problem: I need to upload files to my website and Apple, as most of you know, has disabled the input field type=file. I've got it working in all other browsers. The action simply calls a php file and passes the file info.
If I didn't have an app, and someone was just manually navigating to my site with the iPhone's Safari browser, I could get around the problem by using CliqCliq, which is a very cool iPhone app. Basically, I use JavaScript window.open() to launch CliqCliq's QuickPic browser in a second Safari window. The user chooses a file; QuickPic uploads it; and the user is returned to the second Safari window that I launched with window.open(). The user closes the window and Safari returns them to the first window (i.e., my website).
The problem is that my website is being shown in my app. (By the way, I don't have my developer license yet, even though I signed up a few weeks ago, and I can't test this in the emulator because I can't install QuickPic into it, I assume.) I wanted to repeat the same steps, described in the previous paragraph, using an iFrame but that didn't seem to work (i.e., the iFrame was blank despite my designating a src). I also tried having a hidden window by using old-fashioned frames and setting the col-width to 0. That also did not work (i.e., Safari, if I recall correctly, opened a separate window).
I'm working a little blind, since I can't test anything on the iPhone, but I figure I have two options: I can either find a way to launch a QuickPic in an iFrame -or- I can find some way to incorporate the Apple toolkit file chooser into the Titanium app.
The problem with the first option -- but again, I don't know until I can try this on the iPhone -- is that I assume both apps (mine and CliqCliq's) could not run at the same time. Even if I had a hidden window, invisible iFrame, etc., the moment it launches QuickPic, I assume my app would quit(?).
The problem with the second option is that I don't have clue as to how to incorporate a file picker into my app by using Titanium (keeping in mind, everyone, that I know very little). Brian at CliqCliq has even offered to give me some code if I can't make Apple's file picker work but again, I'm not sure what to do next.
What do you folks think? What's the best method? And, what's the easiest thing for a simpleton to do?
Thanks.
<input type="file"> is not supported on the iPhone. You'll need to use Titanium's APIs, specifically the Media one (openPhotoGallery or showCamera).
As a side note, Apple reportedly rejects apps that are just a webview displaying a website. You may want to consider putting most of the app code in local storage and using AJAX to fetch content.