Below is the code that I'm using to build a page on my website. I'd like the video that I have set to display in the background across the entire screen. I've been able to achieve this on a PC, portrait on a mobile device (I'm currently using an iPhone 12 pro), and on landscape on a mobile device.
However, I'm noticing two issues at the moment. The first issue is that on a mobile device I'm able to scale the video to any size that I'd like. The second issue is that when placing my mobile device in landscape and refreshing the pages a few times the video scales down and doesn't display across the entire screen.
How can I set the video so that no matter what device someone is using it can't be rescaled? And how can I have the video be played full across any screen of any device? The answer to the solution seems to lie within the meta tag, no matter what I do with the CSS it doesn't change the size of the video to fit a mobile device.
<!DOCTYPE html>
<html>
<meta name="viewport" content="viewport-fit=cover, user-scalable=no" charset="utf-8">
<body>
<title>MORIKOBOSHI - 公式ウェブサイト・Official Website</title>
<div class="video-container">
<video src="Home_Page.mp4" autoplay loop muted playsinline style="z-index: 100px; overflow: hidden; object-fit: cover;"></video></div>
<div class="relative">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;">
</div>
<div class="absolute">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;">
</div>
<div class="home_page">
<p style="text-align: center; font-size: 40px; font-family: sans-serif; overflow: hidden;"><b>日本語</b> | <b>English</b></p></div>
<style>
.relative {
font-size: 25px;
}
.absolute {
font-size: 13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
font-size: 11px;
}
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
font-size: 6px;
}
}
video {
object-fit: fill;
}
.video-container {
position: fixed;
text-align: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: 100%;
height: 100%;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.video {
width: 100vh;
}
}
.relative {
position: absolute;
top: -10px;
left: -13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
position: absolute;
top: -15px;
left: -30px;
}
}
.absolute {
position: absolute;
left: 28px;
top: 28px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
position: absolute;
top: 4px;
left: -15px;
}
}
video {
position: fixed;
text-align: center;
object-fit: cover;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
object-fit: cover !important;
-webkit-object-fit: cover !important;
-moz-object-fit: cover !important;
-o-object-fit: cover !important;
}
p {
color: white;
text-decoration: none;
color: white;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
-1px -1px 0 #000;
font-size: 400%;
margin: 50px;
position: relative;
z-index: 3;
}
.home_page {
position: fixed;
top: 520px;
left: 410px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.home_page {display: none;
}
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.home_page {display: none;
}
}
</style>
</body>
</html>
So this currently is supposed to be a website that only work for mobile. When I view it on Chrome's mobile view in inspector it works perfectly fine. Yet when I use safari or my phone it will mess up and skip over the second of the that it is supposed to snap to. Here is the relevant code:
function startGreet(){
const greets = ["Hey","Hello","Good Morning"];
const p = document.getElementById('greeting');
p.innerHTML = greets[Math.floor(Math.random() * greets.length)];
}
/* If reaches bottom of page do something code
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
}
};
*/
#keyframes jump {
0% { transform: translate(0,0); }
20% { transform: translate(0,-95%); }
40% { transform: translate(0,15%); }
60% { transform: translate(0,-10%); }
80% { transform: translate(0,0%); }
100% { transform: translate(0,0); }
}
body{
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling:touch;
}
html, body{
position:absolute;
overflow:auto;
overflow-x: hidden;
margin:0;
height: 100vh;
width:100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color:white;
}
#greeting{
position:absolute;
width:100%;
font-size:75px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin-top:75%;
color:black;
}
#slideUp{
position:absolute;
height:5%;
width:100%;
font-size:70px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin:0;
bottom:10%;
color:#686868;
-moz-animation: jump 2.5s 3s infinite;
-webkit-animation: jump 2.5s 3s infinite;
-o-animation: jump 2.5s 3s infinite;
animation: jump 2.5s 3s infinite;
}
#scrollCont{
position:absolute;
overflow: scroll;
top:0;
height: 100vh;
width:100%;
-webkit-overflow-scrolling: touch;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
-webkit-scroll-snap-stop: normal;
scroll-snap-stop: normal;
}
.row{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: start end;
scroll-snap-align: start end;
scroll-snap-stop: always;
}
#home{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: none;
scroll-snap-align: none;
}
#flower{
width:150%;
}
#secondRow{
color:black;
word-wrap: break-word;
background-color:#a0dfff;
overflow:hidden;
}
#secondRow .title{
padding-top:5%;
color:black;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin-left:10%;
margin-top:5%;
}
#secondRow hr{
border-color: black;
}
#bodyCont{
font-size:40px;
position:relative;
top:10%;
left:10%;
width:80%;
color:black;
font-family: 'Lato', sans-serif;
}
#thirdRow{
background-color:black;
}
#thirdRow .title{
padding-top:5%;
color:white;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin:0;
margin-left:10%;
}
#thirdRow hr{
border-color: white;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:300|Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mainMenu.css">
<link rel="stylesheet" type="text/css" href="indexR2.css">
<link rel="stylesheet" type="text/css" href="indexR3.css">
<script src="mainMenu.js"></script>
</head>
<body onload="startGreet()">
<div id="scrollCont">
<div id="home">
<h1 id="greeting" ></h1>
<p id="slideUp" >^ ^ ^</p>
</div>
<div id="secondRow" class="row">
<h1 class="title">Introduction</h1>
<hr>
<div id="bodyCont">
<p><i>text text text text text</i></p>
<img id="flower" src="https://cdn.pixabay.com/photo/2012/04/18/19/18/shrub-37619_640.png"/>
</div>
</div>
<div id="thirdRow" class="row">
<h1 class="title">Introduction</h1>
</div>
</div>
<!--<img id="videos" src="https://www.sccpre.cat/mypng/full/15-156384_old-camera-png-camera-drawing-transparent-background.png"/>-->
</body>
</html>
Remember! This is supposed to only work on mobile only so it will look messed up if not on mobile dimensions.
Can you try adding -webkit- prefix to keyframe? Since for Safari on iOS you should implement with the vendor prefix -webkit- (as you can see on developer.mozilla.org) Like this:
`#-webkit-keyframes jump {
0% { transform: translate(0,0); }
20% { transform: translate(0,-95%); }
40% { transform: translate(0,15%); }
60% { transform: translate(0,-10%); }
80% { transform: translate(0,0%); }
100% { transform: translate(0,0); }
}`
I tried fetching the bodyHTML using the following code
MCOIMAPFetchContentOperation * op = [imapsession fetchMessageAttachmentOperationWithFolder:folderName uid:uid partID:partId encoding:MCOEncoding8Bit
And I got the bodyHTML with some unwanted extra code. The Html I got for one of the mail is
<div style="padding-bottom: 20px;"></div><div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org=
<br/>/TR/xhtml1/DTD/xhtml1-strict.dtd">
<br/><html xmlns=3D"http://www.w3.org/1999/xhtml">
<br/><head>
<br/><meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8" />
<br/><meta name=3D"viewport" content=3D"width=3Ddevice-width" />
<br/><meta http-equiv=3D"X-UA-Compatible" content=3D"IE=3Dedge" />
<br/></head>
<br/><body style=3D"-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; =
<br/>background: #EEEEEE; color: #222222; font-family: 'Open Sans', Arial, sans-=
<br/>serif; font-size: 14px; font-weight: normal; line-height: 22px; margin: 0; =
<br/>min-width: 100%; padding: 0; text-align: left; width: 100% !important" bgco=
<br/>lor=3D"#EEEEEE"><style type=3D"text/css">
<br/>body {
<br/>width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -m=
<br/>s-text-size-adjust: 100%; margin: 0; padding: 0;
<br/>}
<br/>.ExternalClass {
<br/>width: 100%;
<br/>}
<br/>.ExternalClass {
<br/>line-height: 100%;
<br/>}
<br/>#backgroundTable {
<br/>margin: 0; padding: 0; width: 100% !important; line-height: 100% !important=
<br/>;
<br/>}
<br/>img {
<br/>outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; widt=
<br/>h: auto; max-width: 100%; float: left; clear: both; display: block;
<br/>}
<br/>body {
<br/>color: #222222; font-family: "Open Sans", Arial, sans-serif; font-weight: n=
<br/>ormal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
<br/>}
<br/>body {
<br/>font-size: 14px; line-height: 22px;
<br/>}
<br/>a:hover {
<br/>color: #222222 !important;
<br/>}
And I am not able to render it on the web view. But when I tried fetching the body using the following method
MCOIMAPFetchContentOperation * opr = [imapsession fetchMessageOperationWithFolder:folderName uid:uid urgent:YES];
I got the proper body html and was able to render it on the webview .The html I got for the above method is:-
<div style="padding-bottom: 20px;"></div><div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body style=
"-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #EEEEEE; color: #222222; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 22px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important"
bgcolor="#EEEEEE">
<style type="text/css">
/*<![CDATA[*/
body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
#backgroundTable {
margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Open Sans", Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
}
body {
font-size: 14px; line-height: 22px;
}
a:hover {
color: #222222 !important;
}
Is there any parser or any other way to get the body html .Since I have to use the method using partID to fetch the bodyHTML.
The issue was while fetching the message using part it always uses the MCOEncoding8Bit for encoding instead of that we have to give the encoding which we get while fetching the message as shown below.
for(MCOAbstractPart *abstractPart in multiAbstractPart.parts)
{
MCOIMAPPart *part = (MCOIMAPPart *)abstractPart;
MCOIMAPFetchContentOperation * op = [imapsession fetchMessageAttachmentOperationWithFolder:folderName uid:uid partID:partId encoding:part.encoding];
}
{please update the english later, I dont want this question to go into the state of limbo }
Ios's webview loads this static content from a url.
For some reason it has issues with its width. It slides left and right even when I have given width of 100%. I've no understanding of ios webview.
Any help would be great.
Here's the html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<!-- for Facebook -->
<meta property="og:title" content="fb-title" />
<meta property="og:type" content="https://somedomain/#/login" />
<meta property="og:image" content="http://somedomain.com/en-us/images/WebsitePieces/homepage/A_header-vmc3030-camera-water-photo-large.png" />
<meta property="og:url" content="https://somedomain/#/login" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '625280937908870606983',
xfbml: true,
version: 'v2.3'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- <button onclick="gogogo()">Share me, please 2</button> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function gogogo() {
FB.ui({
method: 'feed',
link: 'somedomain.com',
picture: 'http://www.somedomain.com/en-us/images/WebsitePieces/homepage/social_share.png',
name: 'somedomain',
caption: 'Learn how easy somedomain is!',
// description: 'Must read daily!'
});
}
</script>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.2.16/angular.js"></script>
<!-- <script src="https://somedomaindev.netgear.com/js/angulike.js"></script> -->
<script src="angulike.js"></script>
<!-- build:css styles/main.css -->
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script>
angular.module('myApp', ['angulike'])
.run([
'$rootScope',
function($rootScope) {
$rootScope.facebookAppId = '625280937606983';
}
])
.controller('myController', [
'$scope',
function($scope) {
$scope.myModel = {
Name: "Installing somedomaincameras is a breeze. Took me less than 10 minutes because it is truely wirefree #somedomain",
ImageUrl: 'img/B_platform.png',
FbLikeUrl: 'http://somedomain.com'
};
}
]);
</script>
<style>
#font-face {
font-family: myFirstFont;
src: url(styles/2BF294_D_0.woff);
}
#font-face {
font-family: 'MorebiRounded-Regular';
src: url('webfonts/2BF294_D_0.eot') format('embedded-opentype'); /* IE9 + later */
src: url('webfonts/2BF294_D_0.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('webfonts/2BF294_D_0.woff') format('woff'); /* Newer browsers */
src: url('webfonts/2BF294_D_0.ttf') format('truetype'); /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('webfonts/2BF294_D_0.eot.svg#Min_font + regular, italic, bold) format('svg');
}
$icon-font-path: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/';
#import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white !important;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
padding: 0px 0px 0px 0px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
p + h4 {
margin-top: 28px;
}
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
background-color: #f0f0f0 !important;
// height:200px;
padding: 0px 0px 0px 0px;
}
}
#media screen and (min-width: 768px) {
.green-p {
color: red;
font-size: 18px;
margin-right: 26px;
/*margin-left: 15px;*/
}
}
.green-p {
color: green;
font-size: 18px;
margin-right: -16px;
margin-left: 3px;
}
.push-down-1 {
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
#close {
box-sizing: border-box;
color: rgb(68, 68, 68);
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
align-self: stretch;
border: 0px none rgb(68, 68, 68);
border-radius: 5px 5px 5px 5px;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
/* #close:before {
box-sizing: border-box;
color: rgb(187, 187, 187);
cursor: pointer;
display: block;
height: 30px;
position: absolute;
right: 3px;
text-align: center;
top: 3px;
width: 30px;
align-self: stretch;
perspective-origin: 15px 15px;
transform-origin: 15px 15px;
content: '×';
border: 0px none rgb(187, 187, 187);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 26px/26px Helvetica, Arial, sans-serif;
outline: rgb(187, 187, 187) none 0px;
}*/
/*#DIV_1:before*/
#DIV_1 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 45px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 22.5px;
transform-origin: 298.508514404297px 22.5px;
background: rgb(211, 211, 211) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(229, 229, 229);
border-right: 0px none rgb(229, 229, 229);
border-bottom: 0.909090876579285px solid rgb(229, 229, 229);
border-left: 0px none rgb(229, 229, 229);
border-radius: 5px 5px 0 0;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
margin: 0px 0px 0px;
margin-left: 3px;
margin-right: 3px;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
#H3_2 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 36.4488639831543px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 18.2244319915772px;
transform-origin: 298.508514404297px 18.2244319915772px;
border: 0px none rgb(68, 68, 68);
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
margin: 2px 0px 10px 0px;
outline: rgb(68, 68, 68) none 0px;
padding: 11px 0px 0px 33px;
text-align: center;
}
.top-down {
margin-bottom: 1px;
/*padding-bottom: 12px;*/
}
#fb-icon {
cursor: pointer;
display: inline-block;
height: 32px;
position: relative;
vertical-align: top;
width: 32px;
perspective-origin: 16px 16px;
transform-origin: 16px 16px;
background: rgba(0, 0, 0, 0) url(img2/facebook_32.png) repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Helvetica, Tahoma, Arial;
}
/*#SPAN_1*/
.g-plus {
margin-top: 2px;
}
.fb-icon {
margin-top: 1px;
}
#SPAN_1 {
cursor: pointer;
display: inline-block;
height: 28px;
position: relative;
text-align: center;
white-space: nowrap;
width: 60px;
perspective-origin: 30px 11px;
transform-origin: 30px 11px;
background: rgba(0, 0, 0, 0) url(img2/fb-share.png) no-repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Verdana, Helvetica, sans-serif;
padding: 3px 0px;
}
/*#SPAN_1*/
#logo { background: url(; background-repeat: none; width: 236px;
height: 169px;
}
/* iphone5 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.green-p {
color: green;
font-size: 12px;
margin-right: -16px;
margin-left: 3px;
}
#H3_2{
width:auto;
font-size:10px;
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
}
#logo { background: url(i); background-repeat: none; width: 150px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding: 0px 0px 0px 0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 9px;
margin-left: 2px;
margin-right: 2px;
}
}
/*iphone6*/
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.green-p {
color: green;
font-size: 12px;
margin-right: 0px;
margin-left: 15px;
}
#H3_2{
width:auto;
font-size:10px;
}
#logo { background: url(img2/cam.png); background-repeat: none; width: 169px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding-top:0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 30px;
margin-left: 2px;
margin-right: 2px;
}
}
</style>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="css/ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="css/ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div class="jumbotron top-down">
<div id="close">
</div>
<div id="DIV_1">
<h3 id="H3_2">
hello I'm dialog header
</h3>
</div>
<div class="row push-down-1">
<div class="col-xs-6">
<!-- <img src="img2/camera_hand.png"> -->
<div id="logo"> </div>
</div>
<div class="col-xs-6">
<div class="row green-p">
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</div>
</div>
</div>
<div ng-controller="myController" class="text-center push-down-2 row">
<div class="col-xs-4 fb-icon">
<span onclick="gogogo()" id="SPAN_1"></span>
</div>
<div class="col-xs-4">
<div tweet="myModel.Name"></div>
</div>
<div class="col-xs-4 g-plus">
<div google-plus></div>
</div>
</div>
<!-- </div> -->
</div>
<!-- jumbotron -->
<!-- container -->
</body>
</html>
WebView has a property -- set scalesPageToFit to TRUE.
I'm using bootstrap on this site; http://toothimplants.com/indexTest.html My media Query for iPhone portrait is working, but I can't get my iPhone landscape code to work. What i'm trying to do is get rid of the background image on iPhone landscape. I'm targeting the iPhone 4 and testing it on my iPhone 4.
Here is my media query code on a external CSS. For full CSS see http://toothimplants.com/screen2.css
/* ---------------- Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px)
and (orientation: portrait) {
html,
body {
height: 100%;
background-image: none;
background-repeat: no-repeat;
background-attachment:fixed;
background-color: #fffff0;
background-size: cover;
}
.iphone {
margin: 30px 0 30px 0;
padding:50px 0 0 20px;
height: 100%;
width: 400px;
background-image: url(_images/toothimplants-iphone_div-background.jpg);
background-repeat: no-repeat ;
background-size: cover;
}
h1 {font-size: 330% !important; margin-top:-90px !important; line-height:100% !important}
h3.phone { padding-left:0 !important; font-size: 150% !important;}
h3.phone-1 { width: 350px;
}
.phone-2 {
width: 360px;
}
.phone-3 {
width: 400px; padding: 10px;
}
.phone-4 {
width: 360px; margin:0 0 40px 0 !important;
}
.phone-5 {
margin:0 0 20px -15px !important;
}
/* ---------------- Smartphones (landscape) ----------- */
#media only screen
and (min-device-width : 321px)
and (max-device-width : 480px)
and (orientation : landscape) {
html,
body {
height: 100%;
background-image: none !important;
background-repeat: no-repeat;
background-attachment:fixed;
background-color: #fffff0;
background-size: cover;
}
}
****Here is the head html;****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>ToothImplants.com</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Adobe Typekit -->
<script type="text/javascript" src="//use.typekit.net/hun6djw.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
Thanks for your help,
Greg
Try this: CSS media queries for different devices and screen dimensions