Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

WebMashup screen size and scaling issues since upgrade to 7.2.2

SA-35373

Summary



When accessing an applicaiton via the Web Mashup on small screen sizes the UI is getting scaled to small sizes rather than rearranging responsivly.

Error Messages



Not Applicable


Steps to Reproduce



Display a harness via Web Mashup on a device with a small screen size.


Root Cause



This expected default behavior on mobile browsers. Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

Resolution



Add the following view port meta tag to the head of the HTML document where your gadget is configured to set the viewport width to the same a the device screen width.

<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
</head>


This will cause the screen to render responsivly as shown below:


Suggest Edit

Published March 25, 2017 - Updated December 2, 2021

Did you find this content helpful? Yes No

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us