Terminé

Controlling your UIWebView Experience

il y a 13 ans • mis à jour par il y a 11 ans • 3

By default, when using a web object all content that is pulled or placed into the UIWebView using the html, url or file attributes can be pinch/zoomed as well as scrolled. The same behavior you will experience on a majority of website when viewing within Safari.

If you are pulling your content in via a feed or local resource, you may want to limit this ability and build within your app the controls to increase font-size, line-height or colors. It also gives a more polished experience for your HTML content if the user can't over-extend the layout or structure you have taken time to design for your HTML content.

To prevent a user from pinch/zooming place the following meta tag within your head of the HTML document or texttemplate.




<meta content="width=100%, minimum-scale=1, maximum-scale=1, initial-scale=1" name="viewport">

If you have fitted web content and have no need to have your web object to scroll or even animate the 'rubberband' effect when swiping vertically you can use the following javascript:




<script type="text/javascript">


function blockMove() {


event.preventDefault() ;


}


</script>

Then place the following within your tag:




<body ontouchmove="blockMove()">

These are a couple tricks to create a more controlled UIWebView experience. For more info on meta tags used within the UIWebView please see Apple's documentation on HTML references

Voter

Réponses 3
Plus ancien en premier
- Plus récent en premier
- Plus ancien en premier

il y a 11 ans

If I wanted to use a web tag to display urls, but in addition use the meta tags to show the navigation bar (back, forward, address), would I need to use a textemplate to create html that contained the meta tags as well as have an iframe in the texttemplate that would contain the web url that I wanted displayed in the web tag?

Or am I making this to hard? The goal is to allow a person to do some simple browsing in the web tag and enable them to use the browser navigation bar. I would most likely start them on google.com and allow them to search and navigate from there.

Répondre
|

il y a 11 ans

Steve,

We have a simple way to create forward and back event on a web tag. You can add it pretty easy, see the example below:




<wire>


  <main>


        <panel name="loader" alias="LOAD" width="100" height="100" background="#ff0000" valign="center" align="center" onclickup="show-web" alpha="1">


           <text name="label" width="100%" height="100%" color="#ffffff" font="Helvetica" size="20" alignment="center" text="Load Web"></text>


        </panel>


        <panel name="Browser" alias="BROWSER" width="100%" height="100%" xpos="100%" alpha="0">


            <panel name="toolbar" width="100%" height="8%" background="#0c181a">


                <panel name="highlight" width="100%" height="1" valign="bottom" background="#b0aba4" alpha=".5"></panel>


                <panel name="back" width="50" height="34" valign="center" cornerradius="3" background="ffffff" onclickup="close-web" xpos="10">


                   <text name="backtext" width="100%" height="100%" color="#000000" font="HelveticaNeue-Bold" size="12" alignment="center" text="Back"></text>


                </panel>


                <panel name="back" width="55" height="34" valign="center" cornerradius="3" background="ffffff" onclickup="back" xpos="75">


                   <text name="backtext" width="100%" height="100%" color="#000000" font="HelveticaNeue-Bold" size="12" alignment="center" text="Return"></text>


                </panel>


                <panel name="forward" width="55" height="34" valign="center" cornerradius="3" background="ffffff" onclickup="forward" xpos="145">


                   <text name="forwardtext" width="100%" height="100%" color="#000000" font="HelveticaNeue-Bold" size="12" alignment="center" text="Forward"></text>


                </panel>


            </panel>


            <web name="web" alias="WEB" width="100%" height="92%" url="about:blank" pagetofit="yes" valign="bottom"></web>


        </panel>


  </main>   



  <actions>  


        <action name="show-web">


            <sync loop="no" startdelay="0">


              <load url="http://rarewire.com" target="WEB" />


              <alpha value="1" target="BROWSER" />


              <translate xpos="0%" time=".5" target="BROWSER" />


            </sync>


        </action>


        <action name="close-web">


            <sync loop="no" startdelay="0">


                <translate xpos="100%" time=".5" target="BROWSER" />


                <alpha value="0" target="BROWSER" />


                <load url="about:blank" target="WEB" />


            </sync>


        </action>


      	<action name="back">


          <if lhs="[object:WEB.cangoback]" operator="e" rhs="yes">  


            <event type="back" target="WEB"/>


          </if>    


      </action>


      	<action name="forward">


      	     <event type="forward" target="WEB"/>


      </action>


   </actions>


</wire>

Répondre
|

il y a 11 ans

Excellent! you made my day. Thanks

Répondre
|

Service d'assistance aux clients par UserEcho