Мобильная верстка | Разработчик сайтов и магазинов на битриксе . И не только.

нам понадобится детектор мобильника http://mobiledetect.net/ — файл Mobile_Detect.php кладем в корень

1.в шабке шабона Joomla пишем до тега Head , заменя верхний Тег html

<?php

require_once $_SERVER['DOCUMENT_ROOT'].'/Mobile_Detect.php';
$detect = new Mobile_Detect;

if ($detect->isMobile()){
	$mobil=true;
}else{
	$mobil=false;
}
 
 //$mobil=true;
 
if($mobil==true){
	?>
	<!DOCTYPE html>
	<html lang="ru">
	<?php
}else{
	?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">	
	<?php
}
?>

....

<?php

require_once $_SERVER['DOCUMENT_ROOT'].'/Mobile_Detect.php';

$detect = new Mobile_Detect;

if ($detect->isMobile()){

$mobil=true;

}else{

$mobil=false;

}

//$mobil=true;

if($mobil==true){

<!DOCTYPE html>

<?php

}else{

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php

}

....

шаг 2. Добавляем




		
		
			
			
XHTML
			
			<meta name="viewport" content="width=device-width, initial-scale=1" />
			
				
					
				
					1
				
						<meta name="viewport" content="width=device-width, initial-scale=1" />
					
				
			
		

 
шаг 3.  заменяем боди


		
		
			
			
PHP
			
			<body class="<?php if($mobil==true){ echo 'mobil'; } ?>">
			
				
					
				
					1
				
						<body class="<?php if($mobil==true){ echo 'mobil'; } ?>">
					
				
			
		

шаг 4. Верстаем для основной  верссии - напревав на мобильную

шаг 5. адаптируем основную в мобильную

для этого мы  пеереопределяем оберточные  классы , это будет выглядеть как то так


		
		
			
			
CSS
			
			.mobil .predlozhenie_out,
.mobil .predlozhenie_in,
.mobil .predlozhenie_list>li,
.mobil .remont_vseh_modeley_out,
.mobil .remont_vseh_modeley_in,
.mobil .master_vo_vseh_rayonah_out,
.mobil .master_vo_vseh_rayonah_in,
.mobil .main_dejurnyi_master_out,
.mobil .main_dejurnyi_master_in,
.mobil .main_otzivy_out,
.mobil .main_otzivy_in,
.mobil .main_kachestvo_block_out,
.mobil .main_text,
.mobil .osnovnye_polomki_out,
.mobil .osnovnye_polomki_in,
.mobil .ceny_na_remont_out,
.mobil .remont_vseh_modeley_content_block,
.mobil .ceny_na_remont_in
{
	width:100%;
	min-width:320px;
	height:auto;
	text-align:center;		
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						.mobil .predlozhenie_out,
.mobil .predlozhenie_in,
.mobil .predlozhenie_list>li,
.mobil .remont_vseh_modeley_out,
.mobil .remont_vseh_modeley_in,
.mobil .master_vo_vseh_rayonah_out,
.mobil .master_vo_vseh_rayonah_in,
.mobil .main_dejurnyi_master_out,
.mobil .main_dejurnyi_master_in,
.mobil .main_otzivy_out,
.mobil .main_otzivy_in,
.mobil .main_kachestvo_block_out,
.mobil .main_text,
.mobil .osnovnye_polomki_out,
.mobil .osnovnye_polomki_in,
.mobil .ceny_na_remont_out,
.mobil .remont_vseh_modeley_content_block,
.mobil .ceny_na_remont_in
{
	width:100%;
	min-width:320px;
	height:auto;
	text-align:center;		
}
					
				
			
		

 
некоторые объекты скроются


		
		
			
			
CSS
			
			.mobil .predlozhenie_line_right,
.mobil .predlozhenie_strelka
{
	display:none;
}
			
				
					
				
					1
2
3
4
5
				
						.mobil .predlozhenie_line_right,
.mobil .predlozhenie_strelka
{
	display:none;
}
					
				
			
		

 
вот так выставим вертикальные списки по 2 элемента


		
		
			
			

			
			.mobil .remont_vseh_modeley_list ul:nth-child(2),
.mobil .remont_vseh_modeley_list ul:nth-child(1)
{
display:block;	
width:40%;
background-image:none;
}
.mobil .remont_vseh_modeley_list ul:nth-child(1){
	margin-left:5%;
}

.mobil .remont_vseh_modeley_list::after{
		content:" ";
	clear:both;
	display: block;
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						.mobil .remont_vseh_modeley_list ul:nth-child(2),
.mobil .remont_vseh_modeley_list ul:nth-child(1)
{
display:block;	
width:40%;
background-image:none;
}
.mobil .remont_vseh_modeley_list ul:nth-child(1){
	margin-left:5%;
}
 
.mobil .remont_vseh_modeley_list::after{
		content:" ";
	clear:both;
	display: block;
}
					
				
			
		

 
Вот так из списка оставляем только первый элемент (например 1 отзыв из трех, которые были сделаны float:left)


		
		
			
			

			
			.mobil .main_kachestvo_block ul li
{
	display:none;
}
.mobil .main_kachestvo_block ul li:first-child
{
display:block;
}
			
				
					
				
					1
2
3
4
5
6
7
8
				
						.mobil .main_kachestvo_block ul li
{
	display:none;
}
.mobil .main_kachestvo_block ul li:first-child
{
display:block;
}
					
				
			
		

вот так переопределяем заголовки


		
		
			
			
CSS
			
			.mobil .content p.title{
	 font-size: 19px;	
	box-sizing:border-box;
	text-align:center;
}
			
				
					
				
					1
2
3
4
5
				
						.mobil .content p.title{
	 font-size: 19px;	
	box-sizing:border-box;
	text-align:center;
}