Change #3199

Mobile devices and "viewport" meta tag

Added by Olivier Salaün about 4 years ago. Updated about 4 years ago.

Status:ClosedStart date:2014-09-22
Priority:NormalDue date:
Assignee:Lukas Hämmerle% Done:

100%

Category:-
Target version:1.19.4

Description

We got a bug report from a user, see below.
If needed we can provide the translation:

On a remarqué que le WAYF/DS de Renater était actuellement inutilisable sur smartphones.

Alors qu'il ne présente pas de vue mobile ou responsive web design, il intègre la ligne html suivante
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
qui contraint les navigateurs à afficher la page dans leur "vraie" résolution (qui interdit de zommer/dézoomer aussi ...).

Ce procédé "viewport" est quasi standard maintenant pour les sites web responsive/mobile ... mais cette directive est contre-productive pour les sites web n'implémentant pas le responsive web design (ou version mobile) et elle rend le site inutilisable.

Sans cette ligne les téléphones et tablettes utilisent naturellement leurs mécanismes internes pour afficher le site dans une résolution supérieure à leur résolution native ; les possibilités de zoom des navigateurs mobiles sont aussi normalement disponibles de fait.

-> supprimer cette ligne viewport permettrait de rentre le WAYF utilisable sur smartphone donc.

History

#1 Updated by Olivier Salaün about 4 years ago

Our webmaster has fixed the default-header.php file as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

We also adapted our custom-css file to have the drop-down list size fit on mobile devices :
#userIdPSelection_iddwrap input {
width:90%!important;
}

It would make sense to apply these changes to the trunk

#2 Updated by Lukas Hämmerle about 4 years ago

  • Tracker changed from Bug to Change
  • Status changed from New to In Progress

Thanks for the good suggestions. I am currently testing the proposed changes.
At least on the iPhone things still seem to work as before (but with zoom). With the CSS change the submit button is placed on a new line, which in the case of a mobile device probably should be ok.

#3 Updated by Lukas Hämmerle about 4 years ago

  • Assignee set to Lukas Hämmerle
  • Target version set to 1.19.4
  • % Done changed from 0 to 60

#4 Updated by Lukas Hämmerle about 4 years ago

  • Status changed from In Progress to Closed
  • % Done changed from 60 to 100

Fixed with with r2736

Also available in: Atom PDF