Layout distorted when viewed on mobile - javascript

I am developing a web site on my localhost. I used the following technologies:
CodeIgniter in my backend, Bootstrap and JQuery on front.
The problem is, when I viewed my site on my phone when accessing my localhost, it got distorted , css does not load correctly, and it seems that javascripts doesn't work. I can't even login.
Why is that so?
Below is the print screen when viewed on mobile.
I am confused where the things got wrong. But I suspect, it is on codeigniter.
Your replies will be appreciated!

The most likely scenario is that the base_url in your config file is set to something like 'http://localhost/ssmis/'.
This is fine for local development, as you're accessing the site on localhost. However, localhost won't work on other machines in your network, so as you noticed you have to enter in the IP address of your computer to test the app. This causes an issue because all your internal URLs in your app still point to localhost, which your mobile device can't access, so assets and URLs (basically, your entire app) won't work.
The solution is to update your base_url to your IP. For example, you can try changing it to 192.168.43.159/ssmis/ for testing. Don't forget to change it back when you want to work on your local machine again.

Related

GUI does not show up in GAE environment but works fine in my local environment

I'm working on a side project to implement a simple web game and want to host it on Google App Engine(GAE). I've done a version, and tested it my local machine(Ubuntu 14.04) to make sure everything's fine. Then, I deploy to GAE but it just show me a blank page. I use inspect in Chrome browser and found the page was loaded, but it just behave differently with my local environment.
I uploaded my source code to github. Could someone also using GAE could help to check anything weired?
Regards,
Adam

Running complex web apps locally

I downloaded a chat template online called shout. When I upload the chat template to heroku, it works fine. However, when I simply doubleclick its index.html in my local browser, it doesn't work. The page refreshes every milisecond. Is this an error specific to what I downloaded, or this is a common phenomenon? If so, is there a way around it?
You need to start a local server to do the http requests.
If you are on a PC download mamp:
http://www.mamp.info/en/
If you are on OSx check out tutorials by the coolest guy on the planet blog:
http://coolestguidesontheplanet.com/get-apache-mysql-php-phpmyadmin-working-osx-10-10-yosemite/
Nothing is wrong with your browser or computer. Based on the language of that chat template, you need to run a server on your local machine to test your app in localhost environment. Most of the popular languages like PHP, Java, ASP, etc run fine on XAMP and WAMP. Just google for one of them, install and voila, you have a server running. Then you can open the index.html as usual and get it working like on Heroku.

webcam permission request doesnt work with local files

When experimenting some things with WebRTC. I looked at some examples and downloaded one from github. This wasn't working at all. At the right side of the url, there was an icon that indicated that my webcam was blocked. I clicked on it and said that it could use my webcam. Then chrome said to reload the page so i did that. And everything was the same as in the beginning. But when I loaded the same site through jsfiddle, it asked me with a pop-up for webcam access (the same way as every other application does) and that worked without a flaw. I tested some other browsers and it was all the same. Does anyone have a suggestion how to solve this problem? Thank you!
In order to use the web cam API, the file must be run from a server. When tyou run it from JSFiddle, it runs on a server, and thus works. It wont work if you run it as a file:/// in your browser, you must run a local web server on your computer and open the web app from there as http://
Running a server
Well running a webserver could be very complex, and requires knoweldege in using softwares like apache or ISS. Luckily enough, for develpers just seeking a simple, straight forward webserver for client side development, there are a couple of easy solutions:
Windows: use a software called WAMP - it automaticaly runs apache on your machiene and creates a folder on your computer in which you can put all the website content. http://www.wampserver.com/en/
Mac: simillar to WAMP, mac has a piece of software called XAMP that does pretty much the same thing. http://www.apachefriends.org/en/xampp.html
Both are pretty simple, but I think will be enough for simple front end development.
Chrome blocked my webcam on a site where I denied access multiple times (because I was testing).
You might need to visit chrome://settings/contentExceptions#media-stream and clear your settings.

Strange website redirect issue on mobile browser that's influenced by cache

I'm at a loss here.
I have a new Wordpress site at synergration.com.
If you access it on a mobile device (phone, not tablet) it will generally load fine the first time. Once you click on to another page and/or reload the home page it jumps into a redirect loop indefinitely attempting to reload the same page over and over and over...
I've weeded through the code and have been unable to find any JS redirects. I've also contacted the theme developer and they've been unable to help.
This only became an issue when I started hosting on WP Engine. They use some advanced caching that seems to be the culprit here as when I test the mobile site on their staging server (where no cacheing exists) it loads fine.
I contacted WPEngine about it and this was their reply:
This is being caused by our caching systems that run on our platform.
It looks like the theme is handling an internal redirect that detects
the user agent (desktop or mobile) and redirects the visitor to the
appropriate site based on that information. However, the redirect is
getting stuck in cache, causing the mobile version to load in an
infinite loop. Unfortunately, we don’t have an easy solution for this.
If this were only one part of the site, we could just exempt that part
of the site from caching, but because it covers the whole site,
exempting from caching isn’t an option. Our staging area is exempt
from all caching, which is why it’s working normally there. (The old
host was most-likely using a non-cached environment, which is why you
didn’t see this issue there). I would contact the theme developer and
ask them if they’ve ever come across this issue before. There’s a good
chance they have, and they might have a clever solution as a
work-around. You might have the option of disabling the mobile
routing, which would solve the redirect issue, though mobile devices
would load the full version of the site rather than the slimmed-down
mobile version.
As noted above, the theme developer didn't have any solution and I'm back at square one so I figured I'd reach out to stack to see if ya'll had any ideas.
I have two sites on WP Engine with redirect. They are identical gensis child themes and redirect plugins. I have one setup with a DNS redirect to a cname record for a "M.sitename.com" URL and the other redirecting to the mobile site that is having the same issue you noted above. I haven't had an issue with the site that points to the cname record. I am about the change the other site to the cname configuration to see if it makes a difference. I have no ideal why this works, but thought you might find this of value.
It works absolutely fine in my mobile's Opera Mini browser. To answer your question, an alternative way is to just create a mobile subdomain, like m.yourdomain.com. Make this decision public and let mobile users know in advance that that is the site for mobile users. A specific mobile site is loads better than visiting the page and then being redirected. It also saves time.
While developing the mobile site, keep in mind, to use minimal JavaScript. The reason being, that older mobile versions may not support JavaScript and if JavaScript is essential then it becomes a big problem.
Speaking about the theme, if it is getting stuck and developer has no idea, so the best option, FOR NOW, is change the template. Let the developer inspect on his very code. You can by that time use another template, that'll keep the site up running well whether it is on Mobile or anything. Because, small errors can divert lot of traffic from your site. I, to be frank, have no idea about what caching problems WP is having, and I don't expect anyone here to be knowing that, so it really depends on time. Till then, as I said, do try to use some other template for the time-being.
All the best.
I faced similar issue recently. It took good amount of time but I finally figured it out.
To prevent redirect from caching, you have to use 302 redirect. Moreover, you have initialize this redirect in "template_redirect" action of wordpress. If you do it in like "init", it'll be cache too.

android can't see web service

I've written my first Android app (Sencha Touch + Phonegap using Eclipse on PC). It pulls some JSON from a WCF service. It works fine in the emulator.
I've now put it on my phone (Samsung GT-19100T running Gingerbread). The app runs but hangs when calling the service. The phone just shows the loading animation. The server shows no request has reached it. The phone can browse the net ok.
EDIT: I should add that the problem is not the server. I can browse to the same services ok on PC, and we have an iPhone app that works with it fine.
The only other strange thing I've noticed is that if I browse to the endpoint on iPhone or PC, I get the JSON text in the browser. If I try it on the android's browser it says "cannot download".
How do I go about diagnosing this?
Is there some sort of option on the phone?
found it. The answer is to SHOOT ME NOW.
the URL had been entered so long ago I forgot all about it, including little details like the fact that it used an internal ip address.
Total facepalm. No, that won't do it. Let's try a facedesk...

Categories