I am a beginner to jQuery Mobile and am developing a mobile website within Dreamweaver CS5.5. Once I received the new DW I immediately updated to jqm 1.0a4.1. Designed my site and it looks good on desktop Safari and mobile Safari. Then I updated to jqm 1.0rc1 and while the site looks same on desktop safari, the entire website design decreased to an unreadable size in mobile safari. I tried again with 1.0rc2 and same thing happened as with 1.0rc1. When I return to 1.0a4.1 the site looks great on desktop and mobile.
Does anyone know why this would happen: is there something I'm missing and can correct to have the latest version of jqm work on both desktop and mobile safari?
Thanks for your time, I appreciate it.
jQuery Mobile 1.0a4.1 dynamically injects a viewport tag into the DOM. In newer versions you need to do this yourself. Try adding this viewport tag to the <head> of your documents:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >
Related
my website has a responsive design that is perfectly rendered in all devices. However it doesn't work when I use Safari's remote debugging. These are the steps to reproduce the error:
I open my site from my iPhone's Safari and it looks as expected.
The site also works fine in a mobile size using Desktop Chrome, Firefox and Safari.
I plug my iPhone to the Mac and inspect the website using Safari's remote debugging inspector: Safari > Develop > My Iphone > www.mysite.com Immediately the iPhone renders a wrong design. Elements don't respect their CSS size settings.
I close the inspector and reload the site from the iPhone and the site is rendered perfectly.
I have the viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I have tried other alternatives but this does not seem to be the problem. I use SASS and my CSS files are minified. I suspect that there's something wrong related to SASS.
I will appreciate any suggestion.
Thank you
I updated to Mojave and the error has been fixed. I guess that something was wrong in my Safari.
Have a Windows 2016 server with IIS 10 running ColdFusion 11. Certain websites (with https://) won't load the default home page on iPhone and iPad only. The default home pages load great on all browsers on Windows 10, and even on a Mac in Safari and Chrome, but won't load on iPhone and iPad in either Safari or Chrome -- they just time out. If I put the name of the default page in the URL, it will load just fine on these IOS mobile devices, but if I just use the site's domain name, it will NOT load. IOS versions are up-to-date. If we set the default page to an html page it WILL load; if we set it to a cfm page it WILL NOT load.
So the FAILING situation is in loading default cfm page on iPhone or iPad.
Appreciate any assistance or advice. Thanks.
I have come up with a workaround for this problem.
I created an index.html file containing:
<meta http-equiv="refresh" content="0;URL='https://domainname.com/index.cfm'" />
and made index.html the default page for the website.
I don't like it, but it seems to get things working on the iPad and iPhone.
I am in the mist of creating a mobile web app and have both meta tags
I have an iphone 5 on 7.0.4
When I click on a regular link like the one below it, opens up a mobile safari window and leaves the webapp. I also tried setting the target to _self and same behavior.
Sign in
I then used my ipad which was on 7.0.3 and it worked as should, not opening mobile safari on links. I think proceeded to update my ipad to 7.0.4 and the same issue as I had on my ipad.
Anyone ran into this issue and or knows a fix ?
Thanks
Since iOS 7.0.4 all links in WebApps open in Safari. As a workaround you can use Javascript:
window.location.href='text.html'
But remember that these steps will not be captured in history (so there is no ability to use Javascript like history.back() ..).
Alternatively, if you are using a menu in your web app, try to combine iframe and Javascript, you can change the content of your iframe with this Javascipt:
document.getElementById("frame").src = new_content.html
This will prevent your WebApp to open up links in Safari and stay in WebApp view.
Versions:
PC OS: Windows 8
iPad OS: iOS 7.0.2 (11A5901)
Chrome: 30.0.1599.16
ExtJS 3.4.0
Problem:
I have a web application that relies heavily on Javascript (using the ExtJS framework). It all seems to work as I expect except one page. When browsing this page on my iPad using Safari, the page renders correctly. When in Chrome, I only get the part of the page that doesn't need javascript. However, if I click on the chrome menu and request desktop site then the page loads as intended.
Things I have tried / searched for:
How to debug this page in Chrome on the iPad. All the articles are either old or say to use Safari (because Chrome and Safari use the same engine?), but the page works in Safari.
Setting the agent string in my desktop version of Chrome. The page still loaded correctly.
I turned off Javascript in Safari (just to see). Safari then behaved like Chrome.
I'm just looking for a direction to go or something to try. I'm pretty new when it comes to iPad development. But I think that if I could just see what the developer tools show, I can work it out from there. I can't post a link because the site is behind a login.
Any help is appreciated!
One approach might be to load Firebug Lite on your page. This would allow you to log errors and print JavaScript values to the console.
How do I debug my jquery mobile app on a windows phone?
My current problem is that a link like this does not work:
If I click on it, I see for a short moment a little black box (loding symbol?) but the app stays on the same page (div).
If I load the same page in the phones Internet Explorer it works.
How do I debug this?
Update
I updated to the latest jquery mobile version and now I get "Error Loading Page" like he is trying to load it as ajax but it is a multipage with the old rel="external" the error did not show up but it still did not work. (Same with jquery mobile 1.0.1)
Update 2
Creating a second page index2.html and setting a link like this works:
<a href="index2.html#next_collection" data-ajax="false" data-role="button" ...
But only if I use a different page. index.html#next_collection does nothing.
Try the Ripple mobile emulator. It has a setting for PhoneGap emulation.
Solved by updating from phonegap 1.3.0 to 1.4.1