QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Retrieve Viewport Height and Width In Intel XDK

Retrieve Viewport Height and Width In Intel XDK

This post is a part 16 of Intel XDK Complete Tutorial post series.

Viewport height and width of the application on same device changes according to the orientation of the app. Therefore we will first need to detect the orientation and then find the height and width of the viewport. Height and width is measured in pixels.

if (intel.xdk.device.orientation == "90" || intel.xdk.device.orientation == "-90")
{
        //landscape
        var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

        var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
}
else
{
        //portrait
        var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

        var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
}

Learn more on orientation at Guide to Intel XDK Orientation.

Nov 7, 2014Narayan Prusty
Intel XDK App using WordPress BackendChange Viewport Width using Intel XDK

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Intel XDK Orientation Guide
  • Launch Browser Inside Intel XDK App
  • Change Viewport Width using Intel XDK
  • Using Intel XDK Find if App is Running in Emulator or Device
  • Launch Default Browser using Intel XDK
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license