visualforce with lightning styling looks different on mobile compared to desktop

Question

Sample code:

<apex:page  docType="html-5.0" 
            lightningStyleSheets="true" 
            showHeader="false" 
            sidebar="false" 
            standardStylesheets="false">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection title="My Content Section">
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Desktop:

iphone X

I am not much of a css expert. Any idea how to fix this?

Answer 1

Note that as per VF guide API version 47:

Apex tags such as <apex:pageblock> and <apex:inputField> are not yet supported for use with SLDS.

But considering other recommendation from same guide, you can somewhat improve the font rendering in responsive display by applying <apex:slds /> to your page and wrap your code in a scoping class, <div class="slds-scope">...</div> as follows:

<apex:page docType="html-5.0" 
            lightningStyleSheets="true" 
            showHeader="false" 
            sidebar="false" 
            standardStylesheets="false">

  <!-- Import the Design System style sheet -->
  <apex:slds />

    <!-- REQUIRED SLDS WRAPPER -->
    <div class="slds-scope">
     <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection title="My Content Section">
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    </div>
</apex:page>

which gives this: