All geek questions in one place

Rotate iPad and SVG with jQuery Mobile

I have an HTML page containing the following. The svg.js file is a link to svgweb, from http://code.google.com/p/svgweb/

If you view it on the ipad and rotate from horizontal to vertical several times, the chart disappears at the bottom of the page. It seems that every time we return to the vertical, svg jumps down a bit.

About where to start evaluating.

<!DOCTYPE html>
<html>
<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
  <script src="/site_media/svgweb/svg.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
 <div data-role="page" id="SingleChart" data-theme="a"> 
  <div data-role="header"  data-position="fixed">
    <h1>Chart Type Pie</h1>
  </div><!-- /header -->

  <div data-role="content" >

   <div id="chartDiv">
<script type="image/svg+xml">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 300 300" width="100%" height="100%">
<path id='s0' d='M150,150 L50,150 A100,100 0 0,1 57 111 L150,150' style='stroke:#660000; fill:green;'/>
<path id='s1' d='M150,150 L57,111 A100,100 0 0,1 150 50 L150,150' style='stroke:#660000; fill:orange;'/>
<path id='s2' d='M150,150 L150,50 A100,100 0 0,1 220 220 L150,150' style='stroke:#660000; fill:green;'/>
<path id='s3' d='M150,150 L220,220 A100,100 0 0,1 50 150 L150,150' style='stroke:#660000; fill:orange;'/>

<text x="-50" y="50" font-family="Verdana" font-size="24" font-weight="bold" text-anchor="middle" fill="rgb(200,200,200)" transform="rotate(270 10 100)">Example Chart</text>
</svg>


  </div><!--content-->
</div><!--page-->
</body>
</html>
+3
source share
2 answers

. , iPad ( iphone Android) , , IPad. javascript, html/css. SVG , DOM , .

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){
   // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

   else if (orientation === -180){

        // Upside down portrait.

    }

}

, :   iPad ?

+3

script "180", "-180" // .

, , iPad .

if(navigator.platform === 'iPad') {
        window.onorientationchange = function() {

        var orientation = window.orientation;

        // Look at the value of window.orientation:
        if (orientation === 0) {
        // iPad is in Portrait mode.

        } else if (orientation === 90) {
         // iPad is in Landscape mode. The screen is turned to the left.

        } else if (orientation === -90) {
         // iPad is in Landscape mode. The screen is turned to the right.

        } else if (orientation === 180) {
        // Upside down portrait.

        }
      }       
    }
0

Source: https://habr.com/ru/post/1779181/

More articles:


All Articles