CSS optimizations for mobile devices

css/default-styles.css

@@ -173,6 +173,41 @@ input {
 	-moz-box-shadow: 1px 1px 8px #999999;
 }
 
+/* Device specific styles */
+@media only screen and (max-device-width: 480px){
+	.box {
+		width: auto;
+		box-shadow: none;
+		border-radius: 0;  
+		-webkit-box-shadow: none;
+		-webkit-border-radius: 0;
+		-moz-box-shadow: none;
+		-moz-border-radius: 0;
+		padding: 0;
+	}
+	
+	#content {
+		width: 96%;
+	}
+	
+	#container {
+		width: 96%;
+		position: auto;
+		left: auto;
+		top: auto;
+		margin-left: 0; 
+		margin-top: 0;
+	}
+	
+	#userIdPSelection {
+		width: 60%;
+	}
+}
+
+html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
+    -webkit-text-size-adjust:none;
+}
+
 /* Dropdown list */
 div.idd_list {
 	border: thin solid #848484;

default-header.php

@@ -5,7 +5,8 @@
 	<title><?php echo getLocalString('title') ?></title> 
 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
 	<meta name="keywords" content="Home Organisation, Discovery Service, WAYF, Shibboleth, Login, AAI">
-	<meta name="description" content="Choose your home organization to authenticate">
+	<meta name="description" content="Choose your home organisation to authenticate">
+	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 	<script type="text/javascript" src="<?php echo $javascriptURL ?>/jquery.js"></script>
 	<script type="text/javascript" src="<?php echo $javascriptURL ?>/improvedDropDown.js"></script>
 	<script language="JavaScript" type="text/javascript">