Aller au contenu

Une solution facile pour Responsive Web Design

AntiStatic

Par AntiStatic
dans (X)HTML et CSS

 Partager

Sujets conseillés

AntiStatic

AntiStatic

Posté
Posté

Salut à tous,



je vous soumets ici une solution que j'ai utilisé pour rendre un site responsive web design sans me prendre la tête avec les em, vw, % et tout ce binz.



Le problème étant qu'en utilisant autre chose que des unités en px, il est très difficile d'avoir le même rendu sur tout les écrans, voir impossible ... telle tablette affiche des textes plus gros qu'une autre, les images (qui sont toujours en pixels faut'il le rappeler) s'affichent différemment en fonction du ration device-pixel-ratio du device, bref c'est le bordel ...



Quand on cherche des solutions sur le net, tout le monde dit : ha ben facile pour re-déclare des styles CSS en fonction de la résolution du device, utilise un viewport avec initial-scale, maximum-scale ... bref pour moi c'est en retour en arrière, vers les années 1998 ou l'on devait presque coder un site par navigateur (netscape, ie et compagnie), vive le progrès ...



Donc ma solution simple et facile est celle-ci :


> Tu intègres ton site en pixels (px) comme ca tout est bien calé


> Tu redimensionnes le site avec une fonction javascript qui change le style:zoom sur le site en fonction de la largeur ou la hauteur (comme tu préfères) de l'écran du device


> Et voila c'est fait, le rendu est le même quelque soit l'écran !



Donc j'aimerais savoir ce que vous pensez de cette solution ? Est-ce que j'ai raté un truc ou cette solution vous semble plus simple et efficace que d'avoir à gérer :


> plusieurs fichiers CSS en fonction du device


> des viewport avec des scales pour chaque device


> des images qui s'affichent différemment en fonction du device-pixel-ratio



Merci pour vos retours.



Voila le code :




<!DOCTYPE html>

<html lang="fr">

<head>

	<title>Titre</title>

	<meta charset="utf-8">


	<style>


	html, body {

		margin : 0 ;

		padding : 0 ;

	}


	#FSite {

		position : absolute ;

		width : 1300px ;

		height : 640px ;

		top : 50% ;

		left : 50% ;

		margin : -320px 0 0 -650px ;

		background : #FFCC00 ;

	}


	</style>


	<script type="text/javascript">


	function XLViewport() {


		var SiteW = 1300 // Largeur du site source ;

		var SiteH = 640 // Hauteur du site source ;


		var ScreenW = getWindowWidth() ;

		var ScreenH = getWindowHeight() ;


		// Je veux que le site fit en fonction de sa hauteur


		PercentH = 100 ;

		if (SiteH > ScreenH)

		PercentH = (ScreenH * 100) / SiteH ;


		PercentW = 100 ;

		if (SiteW > ScreenW)

		PercentW = (ScreenW * 100) / SiteW ;


		if (PercentW <= PercentH) Percent = PercentW ;

		else Percent = PercentH ;


		Scale = Percent / 100 ;


		FFrame = document.getElementById('FSite') ;

		FFrame.style['-webkit-transform'] = 'scale(' + Scale + ')';

		FFrame.style['-moz-transform'] = 'scale(' + Scale + ')';			

		FFrame.style['-ms-transform'] = 'scale(' + Scale + ')' ;

		FFrame.style['transform'] = 'scale(' + Scale + ')';


	}


	function getWindowHeight() {

		var windowHeight=0;

		if (typeof(window.innerHeight)=='number') {

			windowHeight=window.innerHeight;

		}

		else {

		 if (document.documentElement&&

		   document.documentElement.clientHeight) {

			 windowHeight = document.documentElement.clientHeight;

		}

		else {

		 if (document.body&&document.body.clientHeight) {

			 windowHeight=document.body.clientHeight;

		  }

		 }

		}

		return windowHeight;

	}


	function getWindowWidth() {

		var windowWidth=0;

		if (typeof(window.innerWidth)=='number') {

			windowWidth=window.innerWidth;

		}

		else {

		 if (document.documentElement&&

		   document.documentElement.clientWidth) {

			 windowWidth = document.documentElement.clientWidth;

		}

		else {

		 if (document.body&&document.body.clientWidth) {

			 windowWidth=document.body.clientWidth;

		  }

		 }

		}

		return windowWidth;

	}



	window.onload = function(){

		XLViewport() ;

	};


	window.onresize = function(){

		XLViewport() ;

	};


	</script>	



</head>

<body>


	<div id="FSite">


		CONTENU DU SITE


	</div>


</body>

</html>

  • Message populaire.
billcom

billcom

Posté
  • Message populaire.
Posté

Salut,



Merci pour ton idée ceci dit je pense que ta proposition ça revient à supposer qu'un internaute naviguera de la même façon sur un pc / que sur une tablette ou un mobile.


A mon avis c'est une solution qui peu apporter un petit plus pour certain site mais ça ne pourra pas remplacer un vrai site webresponsive qui est non seulement adapté à la taille de l'écran mais surtout adapté à la navigation tactile



Anthony


  • Vote 1
AntiStatic

AntiStatic

Posté
  • Auteur
Posté

Effectivement ca revient à naviguer de la même façon quelques soit l'écran. Mais ca permet surtout d'afficher les images et les textes de la même facon partout. Le pb étant ces satanés device-pixel-ratio diiférent en fonction de chaque device qui font qu'un coup l'image prend 10% de l'écran puis sur un autre 30%, c'est ingérable ...



Je suis d'accord : ce n'est pas vraiment un site responsive design. Mais cela n'empêche pas d'avoir un site adapté à la navigation tactile. Je pense qu'aujourd'hui il faut penser ca charte directement pour les mobiles et les tablettes (gros textes, gros boutons, etc ..) en tout cas c'est ce que je fais.



L'avantage de cette solution, pour moi, est d'avoir le rendu strictement identique et surtout de tout pouvoir caler au pixel près !


PotatoesJunky

PotatoesJunky

Posté
Posté

L'avantage de cette solution, pour moi, est d'avoir le rendu strictement identique et surtout de tout pouvoir caler au pixel près !

Ben oui, mais justement, le responsive consiste également à réfléchir en amont à l'affichage sur de petites résolutions, et cet affichage passe bien souvent par un masquage de certains contenus et une réorganisation de la structure de chaque page.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...