0

I have a SharePoint Online site, https://[mysite].sharepoint.com. My goal is to have a couple pages on this site that utilize jquery mobile to give an app-like feel to the user. As it stands, I have a page designed that uses jquery mobile to display a simple form https://[mysite].sharepoint.com/SitePages/index.aspx. I built this page as a simple html page then renamed it to index.aspx and uploaded to SharePoint. The page loads just as expected on a desktop, however when viewing on a mobile device I get a blank screen:

Desktop desktop view of index.html

Mobile

mobile view of index.html

I understand that by renaming a plain html page to aspx I don't get all the parts of an aspx file that SharePoint is looking for, therefore it cannot render it. I can force the mobile device to render in desktop mode by appending "?mobile=0", but I loose the app-like feel.

Does any know of a way to implement jquery mobile in a SharePoint Online environment?

Improve this question
5
  • Without jQuery mobile, Did you check weather the site is being loaded on the mobile device?
    – Pradip R.
    Commented Jun 8, 2015 at 5:43
  • Pradip, when jquery mobile is not called on the page I have the same blank result on the mobile device. I believe the reason is that I started with a regular html page and then later renamed to aspx. If I don't rename to aspx and keep the html extension, SharePoint won't render the page in the browser but rather prompt for download. This is also the behavior I get if I point a Page View web part or CEWP to the html file.
    – Anthony Bandoly
    Commented Jun 8, 2015 at 6:03
  • Take a look at following link: support.office.com/en-us/article/… This might help you somewhat. And also check your site in browser with mobile simulator.
    – Pradip R.
    Commented Jun 8, 2015 at 6:05
  • Thanks Pradip. I've gone through that link and it provides some great information. However, it doesn't specify exactly how to set it up. For example, where should my form code live? Where should my jquery mobile and spservices library calls go? When I put my form code in a CEWP I get an error because of the <form> tags. Thanks again for your help.
    – Anthony Bandoly
    Commented Jun 8, 2015 at 16:38
  • Well, you can simply reference all js file inside master page or else in CEWP only once. You should not add more than one form tag in a page.
    – Pradip R.
    Commented Jun 8, 2015 at 16:43

1 Answer 1

Reset to default
1

After doing a lot of research, I found there was one single line missing in my script that immediately made mobile view work exactly as expected. Here is the line I was missing:

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

Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Improve this answer
1
  • you added/refrenced the script in master page?
    – Deepika
    Commented Jan 8, 2019 at 8:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.