Opera Mobile Emulator

Сегодня нашел одну фишку которая мне очень хорошо помогла хотел бы поделиться с вами. Это фишка называется "Opera Mobile Emulator", обычно мне не очень нравится продукты от Opera Software но тут есть исключение.
Есть проект который написан в Java я его скинул себе на локальную машину и начал тестировать и все было вроде норм как только не начал тестировать часть для mobile, проблема была в том что я ни как не смог набрать адрес (m.ip:8080/IUnlock3) как я не мучился все методы перепробовал не получилось, думаю проблема в виртуальных хостах была.
И вот я прописал в C:\Windows\System32\drivers\etc\hosts вот эту строку 127.0.0.1 m.localhost.
Уже при написании в адресной строки m.localhost:8080/IUnlock3 все работало отлично, только на моей локальной машине, то есть зайти через IP с телефона невозможно было, и вот тут как раз я нашел этот сервис от Opera.



Устанавливаем программку и выбираем устройства которая нас интересует (страно почему нету в списках iPhone), а дальше выбираем размеры которые нам нужны, мне понадобилось написать код для landscape and portrait view

 <div class="container">	
		<div class="clearfix">
			<div class="short_description">
				<div class="iphone_images"></div>
				<div class="short_description_title">
					<h1>iPhone Jailbreak & Unlock:</h1>
					<h2>Mit unseren Anleitungen in nur 15 Minuten, 100%ig garantiert.</h2>
				</div>
				<div class="clear"></div>
			</div>			
			<ul class="nav_buttons">
				<li><a href="#">Jailbreak / Unlock</a></li>
				<li><a href="#">Ihre Vorteile</a></li>
				<li><a href="#">Kaufenn</a></li>
				<li><a href="#">Das bekommen Sie</a></li>
				<li><a href="#">Verfügbarkeit testen</a></li>
				<li><a href="#">Viele gute Gründe</a></li>
				<li><a href="#">Features</a></li>
				<li><a href="#">Geld-zurück-Garantie</a></li>
			</ul>
        

		
		</div>
	</div>

Это код HTML тут создаем список с 8 елементами которые имеют резиновую ширину, при portrait view нужно было 2 колонки а при landscape view 4 колонки и для этого я написал вот этот код:

 .nav_buttons li a {
 	display:block;
 }
 

/* Portrait */
@media screen and (orientation:portrait) {
   .nav_buttons li {
	   	width:46%;
	   	float:left;
	   	height:90px;
	   	margin:2%;
	   	background-color:#52b8da;
	   	border-bottom:10px solid #1b729f;
   }
   .nav_buttons li a {
 		display:block;
	   	text-align:center;
	   	font:16px Arial;
	   	color:#fff;
	   	padding:20px 0;
	   	height:50px;
	   	word-wrap: break-word;
 	}
 	.nav_buttons li a:hover {
		border:none;
		background-color:#1b729f;
 	}
   
}

/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
    .nav_buttons li {
	   	width:21%;
	   	float:left;
	   	height:70px;
	   	margin:2%;
	   	background-color:#52b8da;
	   	border-bottom:10px solid #1b729f;
   }
     .nav_buttons li a {
 		display:block;
	   	height:30px;
	   	font:12px Arial;
	   	color:#fff;
	   	text-align:center;
	   	padding:20px 0;
	   	word-wrap: break-word;
 	}
 	  .nav_buttons li a:hover {
		border:none;
		background-color:#1b729f;
 	}
}

и вот можете все это увидеть на примере.





И в конце хотел бы добавить что емуляторы это не есть хорошо :) поверьте лучше протестировать все на реальном аппарате чем через этот софт просто у меня другого выбора не било, а так хотя-бы сориентировался.