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.
Related
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 have my iPad connected to my Mac, I open up 'Develop > iPad Name > Page Name', but I can't seem to inspect & edit the same CSS as I see on Chrome.
Here's a screenshot from Safari Inspect:
And here's chrome screenshot of the same page:
At first I just figured Safari Web Inspector is funky that way, but other sites work fine. I.e. I'm able to view & edit the css on other sites as required, but on this particular site I just cant.
Has anyone faced a similar issue? Or any idea what could be causing it?
This is likely a bug. There should not be differences between Chrome and Safari. Please file a bug report at https://bugreport.apple.com/. If you can include a URL or .webarchive from the device (click the Download button in the toolbar), that will help us diagnose the discrepancy directly.
I have very bizarre problem. On mobile version of the website if I open it on desktop browser everything is fine, but when I open it on mobile browser I have some random numbers (781, 2e, 12e and so on) on some random areas.
AND this is happening on iphone 5S not on iphone 4s or 5!
even if I'm putting just pure html in it, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>blah blah in div</div>
<p>blah blah in paragraph</p>
</body>
</html>
still getting a unwanted 0 at the bottom:
I added this code
header("Cache-Control: no-transform");
at the very top of the page, even before:
<!DOCTYPE html>
and it worked!
We just noticed this same problem happening with the mobile version of all of our sites (thousands of sites). For us it appears to be happening on all devices, iphone & androids.
We tried the fix header("Cache-Control: no-transform"); and it does fix the issue.
** UPDATE: We have concluded this is some kind of proxy server issue by the mobile providers. When we switch to WIFI on both Android and Iphone the random characters disappear.
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.
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" >