Mobile Behavior

People expect Quip documents to work great on mobile, and your app is no exception. The API makes detecting the client environment as simple as calling a function. Here's how you check if your app is being rendered on mobile:

if (quip.apps.isMobile()) {
    console.log("It's mobile!")
}

Your app can also optimize itself to behave differently in smaller containers. For example, try resizing the window after inserting the @Calendar app, or comparing how it looks on web versus a phone.

Here's how you can check the container width. You'll also want to listen on changes so your app can adjust dynamically:

if (quip.apps.getContainerWidth() < 600) {
    console.log("A wee bit small.")
}

quip.apps.addEventListener(
    quip.apps.EventType.CONTAINER_SIZE_UPDATE,
    function() {
        console.log("Container size updated! New width: " + quip.apps.getContainerWidth());
    }
);