Hey, guys!
I’ve tried to make my website a bit more mobile friendly by changing the layout in JavaScript if I detect my website is being run on a mobile device.
flatassembler.000webhostapp.com
However, that part of the script works in Mobile Chrome and on Safari on iPad, but it breaks the layout completely and renders the text illegible in most of the other mobile browsers. What I’ve done now is to make some browser-sniffing to disable that part of the script and to just increase the text-size in other mobile browsers. That works in Firefox on Android and the Android Stock Browser, but not on Safari on iPhones.
Please help, I may well be losing visitors because of that! (And please don’t just tell me to learn advanced CSS, my school is killing me right now and I don’t have time for that!)
By the way, what do you think is the best way to debug JavaScript on iPhones?
Well, I can answer your second question first.
If you have a Mac, enable the debugging menu in Safari. Then, enable debugging on your iPhone in Settings > Safari > Advanced (more info here). If you connect the iPhone to the Mac via USB, you can debug from the Mac’s browser.
If you don’t have a Mac, there’s sadly no way to do this.
In response to the rest of your question, what code are you using to change the layout? I’m not well-versed in JavaScript personally, but as I understand it you should just be able to write a separate script that only works for the iPhone version (using screen dimensions, ideally) to set a different layout.
Here is that code:
document.head.innerHTML+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">";
var niz=document.getElementsByTagName("svg");
for (var i=0; i<niz.length; i++)
niz[i].style.display="none";
document.getElementsByTagName("aside")[0].style.display="none";
document.getElementsByTagName("aside")[0].style.float="none";
document.getElementsByTagName("aside")[0].style.width="100%";
document.getElementsByTagName("aside")[0].style.height="auto";
document.getElementsByTagName("aside")[0].style.WebkitAnimationName="none";
niz=document.getElementsByClassName("popup");
for (var i=0; i<niz.length; i++) {
niz[i].style.width="50%"
niz[i].style.left="45%";
niz[i].style.maxWidth="none";
}
document.getElementsByTagName("section")[0].style.height="auto";
document.getElementsByTagName("section")[0].style.float="none";
document.getElementsByTagName("section")[0].style.width="100%";
document.getElementsByTagName("header")[0].style.height="auto";
document.getElementsByTagName("header")[0].style.lineHeight="normal";
document.getElementsByTagName("main")[0].style.width="100%";
document.getElementsByTagName("footer")[0].children[0].style.display="inline";
document.getElementsByTagName("footer")[0].children[0].style.float="none";
document.getElementsByTagName("footer")[0].children[0].innerHTML+="<br/><br/>";
document.getElementsByTagName("footer")[0].style.height="auto";
document.getElementsByTagName("footer")[0].style.lineHeight="normal";
document.getElementsByTagName("header")[0].outerHTML+="<button id=\"showNavigation\" style=\"width:100%;\">Show navigation<\/button>";
document.getElementById("showNavigation").onclick=
function()
{
if (document.getElementsByTagName("aside")[0].style.display=="none")
{
this.innerHTML="Hide navigation";
document.getElementsByTagName("aside")[0].style.display="block";
}
else
{
this.innerHTML="Show navigation";
document.getElementsByTagName("aside")[0].style.display="none";
}
}
// window.setTimeout(function(){document.body.removeChild(document.body.children[document.body.children.length-1]);},2000);
document.getElementById("naslov").style.width="100%";
document.getElementById("naslov").style.float="none";
document.getElementsByTagName("header")[0].style.backgroundColor=document.getElementById("naslov").style.backgroundColor;
document.getElementsByTagName("footer")[0].children[1].style.display="inline";
document.getElementsByTagName("footer")[0].children[1].style.width="100%";
document.getElementsByTagName("footer")[0].children[1].style.float="none";
document.getElementsByTagName("footer")[0].style.backgroundColor=document.getElementsByTagName("footer")[0].children[0].style.backgroundColor;
isMobileChrome=true;It’s a little ugly, but I think you will get the point. Every one of the directives I’ve used there are, according to bitdegree/learn, compatible with browsers as old as Internet Explorer 9 (with the exception of “WebkitAnimationName”, which is supported since the earliest versions of Safari and Chrome, and it doesn’t have much to do with the layout).
Any answers? Please, it’s important. I am quite sure some of you have experience with that. What’s fascinating to me is that the quirks of the Safari on iPhone, being one of the most popular web-browsers for years, aren’t better documented. What’s also fascinating, albeit slightly less, is that even has so many quirks. It’s based on the same engine as Mobile Chrome and as Safari for Mac, both of which are relatively good or even excellent browsers (Mobile Chrome often freezes, but it nevertheless has excellent JavaScript support).
After another few hours of tweaking, I’ve fixed it myself. No sane explanation how it works. I still don’t understand how can a browser so full of quirks be so popular.
1 Like
Javascript is not used for mobile frendliness, CSS is used for that. You can learn media queries in like 5 minutes at most. Just google it. They are better, faster, easier and overall better than any javascript.