Search jQuery

jQuery Forum

jQuery Mobile

dipspb

Problem with jQuery Mobile rendering on WP7

in jQuery Mobile • 11 years ago

Hello,

Here is a problem with jQueryMobile form parts rendering on WinPhone 7.0 platform.

Right now we are implementing support for WP7 in Rhodes framework. To render jQueryMobile-based UI on WP7 platform we are using WebBrowser control. There are some rumors that this control is based on SilverLight version of control.

But the problem is in the rendering behavior of WebBrowser control. It differs very much from rendering behavior of standalone web browser application (IE Mobile I guess) in WP7.

I attached here a screenshot of the broken style in WebBrowser control and screenshot for properly rendered style in IE Mobile. In both cases it demonstrates rendering of bottom side of page http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/forms-all.html

As you can see it definitely has a problem. So I unsure that WP7 platform support may be considered as "A-grade". I guess we aren't alone with this problem, PhoneGap may have this problem too.

If it helps we may provide you sample WP7 application code with WebBrowser control so you will be able to fix the issue.

Thank you in advance,

Dmitry Prokhorov, rhomobile.com

Attachments

form-in-WebBrowser-app.png
Size : 85.13 KB Downloads : 2273 Download
form-in-WebBrowser-component.png
Size : 73.83 KB Downloads : 2318 Download

Replies(2)

sgrebnov

Re: Problem with jQuery Mobile rendering on WP7

11 years ago

Hi Dmitry,

For some reason web browser control can render the page in quirks mode (most popular reason is missing corresponding X-UA-Compatible or DOCTYPE information. So please let me know

#1 whether you just trying to open in web control the following remote URL
http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/forms-all.html

if so I'll test jqmobile gallery page and let you know if it works for me.

#2 whether the page is stored in persistence storage on device
you can try to add the following meta tag (зls also check that you have <!DOCTYPE html>)
<meta http-equiv="X-UA-Compatible" content="IE=9" >

If you share the code I'll be able to investigate the problem.

PS. Please also confirm that you refer to WP7.0 version, not WP7.5 Mango.

Thank you,
Sergey Grebnov

dipspb

Re: Re: Problem with jQuery Mobile rendering on WP7

11 years ago

Thank you very much, Sergey!

Your advice with X-UA-Compatible meta tag helped us a lot! :)

1) No, it doesn't just load content from mentioned URL. Instead, it firstly loads follow content from local storage. Then I click on second link to navigate it to jqmobile doc page or to my standalone page.

As you can see it has doctype definition and links to external pages.

layout.erb (it substitutes <%= @content %> with content of each exact page, look below for pages)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Store</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script src="/public/jquery/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/public/jquery/jquery.json-2.3.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="/public/js/jquery-wp7-patch.js"></script>
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0.1.css">
<script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0.1.js"></script>
<link href="/public/css/windows_phone7.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<%= @content %>
</body>
</html>

index.erb

<div data-role="page">
<div data-role="header" data-position="inline">
<h1>Wp7</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="http://192.168.0.176:8080/wp7css/index.htm" rel="external" data-ajax="false">page stub</a></li>
<li><a href="http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all.html">JQMobile forms doc</a></li>
</ul>
<form method="POST" action="#no_matter_just_stub_url">
<div class="error-message">Sample error message</div>
<div data-role="fieldcontain">
<label for="fld1" class="itemLabel">Field1</label>
<input type="text" id="fld1" name="fld1" class="itemValue" />
</div>
<div data-role="fieldcontain">
<label for="fld2">Password</label>
<input type="text" id="fld2" name="fld2" class="itemValue" />
</div>
<input type="submit" value="Save"/>
</form>
</div>
</div>

2) I added <meta http-equiv="X-UA-Compatible" content="IE=9" > and looks like internal app pages rendered ok now! But external pages still have styling issues. Isn't it a good idea to put this meta tag in your documentation?

3) Yes, exactly, it is WP 7.0. Neither 7.1 nor 7.5.

Sincerely,

Dmitry Prokhorov

Top Reply

Response title

Attachments

jQuery Forum

Problem with jQuery Mobile rendering on WP7

Attachments

Replies(2)

Re: Problem with jQuery Mobile rendering on WP7

Re: Re: Problem with jQuery Mobile rendering on WP7

Statistics

Tags

Actions