CODEWITHSUNDEEP
jqueryhtmljquery-mobilemobile-safari
user129688
user129688

Reputation:

Jquery renders on Safari but not mobile safari

Everything works on computer but when I run this page on my phone this script doesn't work. Is there something I need to put in the code or something?

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <script>
        $(document).on ("pagecreate", "#pagegone", function(){
            $("p").on ("tap", function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <div data-role="page" id="pagegone">
     <p>Tap on me</p>
</body>
</html>

Upvotes: 0

Views: 211

Answers (1)

War10ck
War10ck

Reputation: 12508

It looks like you're missing your viewport meta tag. Add this snippet:

<meta name="viewport" content="width=device-width, initial-scale=1">

in the <head> section of your HTML above the linked CSS file.

In addition, your data-role="page" div is not being closed properly. You should add </div> after the paragraph tag to properly close the div.

Reference: jQuery Mobile Page Anatomy

EDIT:

Not sure if this makes a difference, but you may want to change your doctype tag to match that of the standard <!DOCTYPE html>. I'm not sure if it's case sensitive but it can't hurt to fix this as well.

Upvotes: 1

Related Questions