webView size not propagating correctly

Other
1

I’m accessing a not-local webpage through a native.webView API.

However, the API does not provide an option to specify the width of the page in the webView of any sort.

My page can adapt to small screens through knowing their width in usual browsers, but does not do that in webView.

The page  is perfectly built and displayed when visiting in Xcode simulator in Safari. In corona’s webView rather not.

I’m simply calling:

webView = native.newWebView( display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight ) webView:request( url )

I’ve tried adjusting the values in config.lua file to 1200 x 1600, for example, but the page still looks the same.

Any ideas what could be wrong here?

2

Apparently, you need to use the same re-positioning code solution created for newTextField — until Corona fixes it - to read more about it, go to: https://forums.coronalabs.com/topic/59256-newtextfield-positioning-is-wrong-for-ios-iphones-ipads-and-android-fine/
 

I had this same problem and then saw your post - after applying the re-positioning code, the abnormal size of my browser window was resolved.

3

Actually your remote document controls the width of the HTML. You control it using a tag like this inside the HTML <head> tag:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, user-scalable=no”>

Here are a few links:

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

http://www.w3schools.com/css/css_rwd_viewport.asp

http://www.quirksmode.org/mobile/metaviewport/

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

Rob

4

Hi Rob,

My comment above is specific to the window size of the webView in my Corona App. Without the re-positioning code, actual device builds on iPhone 5 and iPhone 6 respond in the same faulty manner as newTextField - although fine on Android and iPads. In other words, the defined area allocated for the webView area doesn’t work properly on iPhones.

For example, in my case, I have dedicated the top 90% of the screen to the webView and placed my close button in the bottom 10%. Without the re-positioning code and calculation, though, it only works on Android and iPads.

5

My answer was directed to the OP and his issue trying to scale a web page to a webview.

Rob

6

Apparently, you need to use the same re-positioning code solution created for newTextField — until Corona fixes it - to read more about it, go to: https://forums.coronalabs.com/topic/59256-newtextfield-positioning-is-wrong-for-ios-iphones-ipads-and-android-fine/
 

I had this same problem and then saw your post - after applying the re-positioning code, the abnormal size of my browser window was resolved.

7

Actually your remote document controls the width of the HTML. You control it using a tag like this inside the HTML <head> tag:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, user-scalable=no”>

Here are a few links:

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

http://www.w3schools.com/css/css_rwd_viewport.asp

http://www.quirksmode.org/mobile/metaviewport/

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

Rob

8

Hi Rob,

My comment above is specific to the window size of the webView in my Corona App. Without the re-positioning code, actual device builds on iPhone 5 and iPhone 6 respond in the same faulty manner as newTextField - although fine on Android and iPads. In other words, the defined area allocated for the webView area doesn’t work properly on iPhones.

For example, in my case, I have dedicated the top 90% of the screen to the webView and placed my close button in the bottom 10%. Without the re-positioning code and calculation, though, it only works on Android and iPads.

9

My answer was directed to the OP and his issue trying to scale a web page to a webview.

Rob