function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Saransh Bharadwaj 1Saransh Bharadwaj 1 

Single page for desktop and mobile.

Can we create a single page for both desktop and mobile(Salesforce 1) with different interface?
Means If I open my VF page on desktop it should come up as VF page but on mobile it should come up as HTML5 page. Is this something possible?

Thanks!
Boris BachovskiBoris Bachovski
It is possible to do that and my way to go would be CSS Media Queries, which allow to show/hide certain content on the page based on the device size. Check out Media Queries for Standard Devices (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) and Show/Hide Content with Media Queries (http://stackoverflow.com/questions/11796297/div-show-hide-media-query). I hope that will help you get started.

The only downside of doing this will be that the page needs to load all the content (for mobile and desktop) which makes the size twice as big, and that's not optimal.
Saransh Bharadwaj 1Saransh Bharadwaj 1
Appreciate for your reply, Boris.

I have somehow managed to display it on different devices using javascript by checking machine type but my concern is, if I am running it on mobile then header and sidebar should be set to false along with standardstylesheets like this -> <apex:page standardstylesheets = false, header=false,sidebar = false, but I am also avoiding controller by using remote objects and JS remoting. Can I somehow set header=false, sidebar=false, standardstylesheet = false in case of mobile and in case of desktop they should be true.

I know it got messy but if you have any better way to do it then please suggest me. I don't want controller.

Thanks in Advance!
Boris BachovskiBoris Bachovski
In that case I'd suggest you to have everything hidden by default. As soon as the page loads and your javascript determines the browser, redirect to the same page and stick another parameter in the URL based on the javascript outcome. For an instance if your page is /apex/MyAwesomePage, as soon as you javascript runs, redirect to /apex/MyAwesomePage&mobile=1. Then inside your controller create a public boolen variable (isMobile) that will indicate whether the page is being viewed via mobile or not. Lastly, inside your header and sidebar properties, merge your variable - header="{!NOT(isMobile)}" sidebar="{!NOT(isMobile)}"