Preview Page link customization to resize the browser window for iPad/iPhone preview

kalai

Hi All,

I am working on creating the SP components, Pages for Mobile Microsite and the customer is going to test the pages by adjusting the browser window width and height properties. I have added(through the dummy component) JS code(it will be removed manually if preview is fine) to the page to set the height and width of browser window for iPad/iPhone device and it was not working when I preview the .page using the preview page link. After converting the .page to .html file the JS code is setting the width and height of browser window and it is working as expected.

Please let me know is there any possibility on customizing the “Preview Page(P)” in .page link in window(A) to redirect the different window(B). The window(B) will have the flexibility to select the devices and return back the value to window(A)

Window(B)

Device Type: iPad iPhone None


If the user selects “iPad” as option then the browser window height and width should be adjusted(by adding JS code) for iPad device and same for iPhone as well. If the user selects “None” as option then it should not add any JS code in .page file.

Please share your thoughts/inputs to proceed further.

Thanks in advance!

Thanks and Regards
Kalai

Ranveer

Hi Kalai,

I have done this in livesite. But never tried on SP. What you can do you can create three diffrent page for iPad, iPhone and desktop. Depend on the header of the Browser you can forward user to particular page.

Check the header component in Installed component example..