-EDIT-
Well, i will update my question according to my progres wich you can see here: http://piscolabis.info/licht/job_single.html
My only problem now is that the background images are not seen in the iphone!!!
HTML CODE
<body class="job_single">
<div id="contenedor">
<div id="head" class="section"><img src="img/logo_small.png" alt="lich-t" id="logo_small" /><h3>JOBS</a></h3></div>
<div id="contenido">
<div id="panel" class="left">
<div id="heading">
<h1>PRODUCER FEIHER / PRODUCER</h1>
</div>
<div id="information">
<p>Duselheimer habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
<div id="panel" class="right">
<ul class="right visible">
<li id="pink">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>BENEDIKT / HOCKTE</h2>
<p>3D - Artist</p>
</span>
</a>
</li>
<li id="orange">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>BEN SIEGLER</h2>
<p>Creative Director</p>
</span>
</a>
</li>
<li id="blue">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>ANDREAS FUS </h2>
<p>Asaberquépone</p>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS CODE
.visible{display:block !important;position:relative;}
.job_single #panel.left,
.job_single #panel.right{
margin-top:50px;
}
#panel.left{
float:left;width:50%;
}
#panel.left #heading{
float:left;
background:#000;
padding:20px;
font-size:40px;
line-height:40px;
}
#panel.left #information{
float:left;
margin-top:20px;
background:url(../img/bg_black_alpha.png);
font-size: 30px; line-height:30px;
padding:20px;
}
#panel.left #information, #panel.left #heading{
padding-left:30px;
color:#fff;
}
#panel.right{
width:40%;
clear:none;
float:right;
}
.job_single #panel.right ul.visible{margin-top:50px}
#panel.right ul.visible li{
margin-top:20px;
}
#panel.right ul.visible li,#panel.right ul.visible li a{width:95%;height:90px;float:right;}
#panel.right ul.visible li a{
background:black;
border-right:10px solid yellow;
}
#panel.right ul.visible li a span.liLeft{
width:95px;
float:left;height:100%;display:block;
position:relative;
right:40px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
#panel.right ul.visible li a span.liRight{
background:black !important;
color:#fff;
}
#panel.right ul.visible li a span.liRight{
z-index:9;
}
#panel.right ul.visible li#blue a{
border-color:#0C7CC3;
}
#panel.right ul.visible li#pink a{
border-color:#C21B7B;
}
#panel.right ul.visible li#orange a{
border-color:#E83B35;
}
#panel.right ul.visible li#blue a span.liLeft{
background-image:url(../img/azul.png);
}
#panel.right ul.visible li#pink a span.liLeft{
background-image:url(../img/rosa.png);
}
#panel.right ul.visible li#orange a span.liLeft{
background-image:url(../img/naranja.png);
}
#panel.right ul.visible li a span.liRight h2{
font-size:30px;
margin-top:10px;
}
#panel.right ul.visible li a span.liRight p{
font-size:30px;
margin-top:5px;
}
Any thoughts about the images??
As I edited the full question, please note that this file will only be used in iphone,
I am doing the landscape view now i will do the portrait later on (only editing the right propertie of .visible)
use mediaqueries to detect orientation
/* Portrait */
#media screen and (max-width: 320px)
{
body {display: none;}
}
/* Landscape */
#media screen and (min-width: 321px)
{
body {display: none;}
}
combined with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I am trying to convert html to pdf which has svg image as background image. When convert it with selectPdf api (v2) it doesn't print background svg image but if i use their online test page to convert same html to pdf it does print background image.
Here's how I am calling api
var options = new PdfOptions();
options.html = html;
options.key = _key;
options.margin_bottom = 0;
options.margin_top = 0;
options.SetLandscape();
var client = new HttpClient();
var content = new StringContent(JsonConvert.SerializeObject(options, new JsonSerializerSettings
{
NullValueHandling = NullValueHandling.Ignore
}));
content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
var result = await client.PostAsync("http://selectpdf.com/api2/convert/", content);
if (!result.IsSuccessStatusCode)
{
var msg = await result.Content.ReadAsStringAsync();
throw new ApplicationException($"Failed to create pdf: {msg}");
}
return await result.Content.ReadAsStreamAsync();
html code sending
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<style>
#watermark {
position: fixed;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=);
height: calc(100% + 50px);
width: calc(100% + 50px);
background-size: 270px 160px;
background-repeat: repeat;
opacity: 0.3;
top: -50px;
z-index:1;
left: -50px;
}
</style>
</head>
<body>
<div class="grid-container" style="width: 1200px">
<div id="watermark"></div>
<div class="grid-x grid-padding-x">
<div class="large-4 cell">
<h3 style="padding: 0px; margin: 0px; height: 100px; display:table-cell;vertical-align:middle;"><strong></strong></h3>
</div>
<div class="large-4 cell text-right">
<h3 style="padding: 0px; margin: 0px; height: 100px; display:table-cell;vertical-align:middle;"> Specification</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
</p>
</div>
</div>
</body>
</html>
When base64 encoded images are used, set an additional API parameter skip_decoding to True.
I am building an html template for a client which will create a drag and drop builder in mailchimp.
I have used the mso-line-height:exactly attribute globally to control erratic line height applied by Outlook.
However - because of this, when the client inserts an image into the body text using the 'insert image' text editor, the images is clipped at the line height of the text - for example if the line height is 20px, the image only shows the bottom 20px.
The solution I have been provided through research is that I have to remove the mso-line-height attribute globally and only apply it in the html code when I really need it - though this is not something a client can maintain.
How can I remove this attribute on images only? I want the exactly rule to be in place until such time as an image is inserted at which point is it m removed.
I have tried
img {
border:0 !important;
outline:none !important;
display:block !important;
mso-line-height-rule:at-least !important;
mso-height-source:userset !important;
}
And also setting a 'min-height:insert image height !important' manually in the code editor inside the mailchimp interface but nothing works.
At the moment it seems like you only have 2 options
1 - you have correct line height but clients can never insert images amongst the text (the have to be table cells pre-designed to have images in them)
OR
2 - you have incorrect line height and non-clipped images but the ability to insert them when you want.
Is there a solution to this that does not involve editing the html each time but can be handled in in the css?
here is my initial styling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<style type="text/css">
body{
margin:0 !important;
padding:0 !important;
-webkit-text-size-adjust:100% !important;
-ms-text-size-adjust:100% !important;
-webkit-font-smoothing:antialiased !important;
}
/*
#tab Button
#section background-Colour
*/
.button{
/*#editable*/background-color:#e5e5e5 !important;
/*#editable*/color:#000000 !important;
height:43px !important;
margin-right:0 !important;
font-size:15px !important;
padding:0 5px !important;
}
/*
#tab Button_2
#section background-Colour
*/
.button_2{
/*#editable*/background-color:#e5e5e5 !important;
/*#editable*/color:#000000 !important;
margin-right:0 !important;
font-size:15px !important;
padding:0 5px!important;
}
a{
text-decoration:none !important;
color:black !important;
}
span.red-2{
color:#bc3434 !important;
}
span.white-force {
color:#ffffff !important;
text-decoration: none;
}
.white-force a {
color:#ffffff !important;
text-decoration: none;
}
img{
border:0 !important;
outline:none !important;
display:block !important;
}
table{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
td{
border-collapse:collapse;
mso-line-height-rule:exactly;
}
a,span{
mso-line-height-rule:exactly;
}
.ExternalClass *{
line-height:100%;
}
.white a{
color:#ffffff;
text-decoration:none;
}
.white1 a{
color:#333333;
text-decoration:none;
background-color:#333333;
}
.white2 a{
text-decoration:none;
}
.black a{
text-decoration:none;
}
.black3 a{
text-decoration:none;
}
.black2 a{
text-decoration:none;
}
.red a{
text-decoration:none;
}
.grey a{
text-decoration:none;
}
.grey1 a{
text-decoration:none;
}
.applewhiltelink a{
color:inherit !important;
text-decoration:none !important;
}
.video img{
width:100%;
height:auto;
}
.mcnTextContent img{
height:auto !important;
}
#media only screen and (min-width:481px) and (max-width:599px){
table[class=wrapper]{
width:100% !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
table[class=main_table]{
width:100% !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_side]{
padding-left:14px !important;
padding-right:14px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=hide],br[class=hide]{
display:none !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
img[class=full_img]{
width:100% !important;
height:auto !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey], td[class=white-force]{
text-align:center !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_bottom]{
padding-bottom:30px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_top],
td[class=pad_top_split]{
padding-top:30px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=fix_height]{
height:30px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=video] img{
width:100% !important;
height:auto !important;
}
} #media only screen and (max-width:480px){
table[class=wrapper]{
width:100% !important;
}
} #media only screen and (max-width:480px){
table[class=main_table]{
width:100% !important;
}
} #media only screen and (max-width:480px){
td[class=pad_side]{
padding-left:14px !important;
padding-right:14px !important;
}
} #media only screen and (max-width:480px){
td[class=hide],br[class=hide]{
display:none !important;
}
} #media only screen and (max-width:480px){
img[class=full_img]{
width:100% !important;
height:auto !important;
max-width: none !important;
}
} #media only screen and (max-width:480px){
td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey],td[class=white-force]{
text-align:center !important;
}
} #media only screen and (max-width:480px){
td[class=pad_bottom]{
padding-bottom:30px !important;
}
} #media only screen and (max-width:480px){
td[class=pad_top],
td[class=pad_top_split]{
padding-top:30px !important;
}
} #media only screen and (max-width:480px){
td[class=fix_height]{
height:30px !important;
}
} #media only screen and (max-width:480px){
td[class=video] img{
width:100% !important;
height:auto !important;
}
}
#media only screen and (max-width:480px){
td[class=pad_top_split]{
padding-top:0 !important;
}
}</style></head>
*edit
Each block that contains text (but may not necessarily end up with an image in it, has the class .grey - I tried these options but to no avail
.grey img {
line-height: 100px (random but taller then the test image)!important;
}
And also
.grey img {
line-height:unset !important;
}
I just want any images inserted amongst text to ignore the surrounding line-height.
here is an example block
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="text block" style="table-layout:fixed;margin-left:auto;margin-right:auto;">
<tr>
<td valign="top" bgcolor="#000000">
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td width="50" align="center" class="hide"> </td>
<td valign="top" class="pad_side">
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td valign="top" height="40" class="fix_height"> </td>
</tr>
<tr>
<td align="center" valign="top" style="font-family:Arial, sans-serif;font-size:15px;line-height:25px;color:#000000;background-color:#000000;" mc:edit="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et.</td>
</tr>
<tr>
<td valign="top" height="40" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="50" align="center" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
Try mso-line-height-rule: at-least on your images. It's essentially the opposite to mso-line-height-rule: exactly.
This blog post might offer some more insight.
In my own builds I add this Outlook conditional style block below my other embedded styles. Then on my inline styles, I avoid using mso-line-height rule and only set font-size/line-height as normal
<!--[if mso]>
<style>
td,th,p,a,h1,h2,h3,h4,h5,h6 {
mso-line-height-rule: exactly;
}
<style>
<![endif]-->
I have a problem of link accessibility after 3D rotating, only happening in Chrome.
When I click a Menu link, the header/nav is rotated, and it opens a "submenu panel".
But after applying this CSS3 transformation, I cannot click on the content inside the submenu panel, the whole area is not accessible.
I have edited a new Fiddle, with less code : https://jsfiddle.net/helloducoux/11rnh4ry/2/
Here is html :
<div id="page">
<header id="header-desktop" class="has-transition">
<div class="header-nav has-transition">
<a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-1">Panel #1</a>
<a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-2">Panel #2</a>
</div><!--/header-nav-->
<div class="header-panel has-transition">
<div id="header-panel-1" class="header-panel-submenu has-transition">
<p class="header-panel-title">Panel #1</p>
<span class="header-panel-close js-flip-header-back">X</span>
<div class="header-panel-body">
<p>I am the content of Panel #1<br />Text and links are not accessible under Chrome only !</p>
</div>
</div><!--/header-panel-1-->
<div id="header-panel-2" class="header-panel-submenu has-transition">
<p class="header-panel-title">Panel #1</p>
<span class="header-panel-close js-flip-header-back">X</span>
<div class="header-panel-body">
<p>Here again, in the content of Panel #2<br /> I cannot acess Text and links...</p>
</div>
</div><!--/header-panel-2-->
</div><!--/header-panel-->
</header><!--/header-desktop-->
<div style="padding:10px;font-size:34px;">
<p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div><!--/content-->
Here's my JS for targeting the correct panel-sumenu, and adding class on the Header flipped :
jQuery(document).ready(function($) {
$(".js-flip-header").click(function() {
$("#header-desktop").toggleClass("is-flipped");
});
$(".js-flip-header-back").click(function() {
$(this).closest('.header-panel-submenu').removeClass("is-open")
$("#header-desktop").removeClass("is-flipped");
});
});
$(document).ready(function(){
$('.js-target-submenu').click(function(){
var tab_id = $(this).attr('data-tab');
$('.js-target-submenu').removeClass('is-open');
$('.header-panel-submenu').removeClass('is-open');
$(this).addClass('is-open');
$("#"+tab_id).addClass('is-open');
})
})
And the CSS :
* {padding:0; margin:0;} *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#page {
padding-top: 120px;
margin: 0 auto;
position: relative;
}
.has-transition {
-webkit-transition: all .4s 0s;
-moz-transition: all .4s 0s;
-ms-transition: all .4s 0s;
-o-transition: all .4s 0s;
transition: all .4s 0s;
}
#header-desktop {
position: relative;
z-index: 999;
height: 120px;
width:100%;
position: fixed;
left: 0;
right: 0;
top: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition:transform .4s linear;
-webkit-transition:transform .4s linear;
}
#header-desktop.is-flipped {
transform:rotateX(90deg);
-webkit-transform:rotateX(90deg);
}
.header-nav{
width:100%;
height:120px;
position: relative;
background: yellow;
transform:translateZ(60px);
-webkit-transform:translateZ(60px);
border-bottom: 1px solid #e7e7e7;
}
#header-desktop.is-flipped .header-nav{
background-color:orange;
}
.header-panel{
width:100%;
height:120px;
position: relative;
background-color:lime;
transform:rotateX(-90deg) translateZ(-60px);
-webkit-transform:rotateX(-90deg) translateZ(-60px);
}
.header-panel-submenu {
width: 100%;
overflow: hidden;
height: 0;
}
.header-panel-submenu.is-open {
height: 100%;
}
.header-panel-title {
margin: 0;
line-height: 120px;
}
.header-panel-close {
position: absolute;
right: 36px;
top: 48px;
cursor: pointer;
}
.header-panel-body {
background-color: pink;
position: absolute;
top: 120px;
left: 0;
right: 0;
padding:30px 10px;
}
I've tryed many modifications cause I saw similar posts/problems (eg this one), but nothing works.
Maybe someone can see the reason ?
Thanks in advance for your help ! :)
How to redirect html page url in mobile version only without refresh page
$(document).ready(function() {
if (screen.width <= 800) {
document.location ="page.html";
}
});
/* [Object] Modal
* =============================== */
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%;
margin: auto;
overflow: auto;
background:#fff;
border-radius: 5px;
padding: 5em 2em;
height: 10%;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;
}
.modal__close:before {
transform: rotate(-45deg);
}
#media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;
}
}
/* Other
* =============================== */
.btn {
cursor: pointer;
/* background: #27ae60; */
display: inline-block;
padding: 0em 1em;
color: #333;
border-radius: 3px;
font-size:13px;
}
#module-circle{font-size:8px !important}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body class="landing">
<!-- Main -->
<section style="width:100%" class="table-content" id="Diverse-content">
<div class="table-content" id="table1-content">
<header class="major" id="Diverse-head">
</header>
<!-- Image -->
<section class="Diverse-content">
<div class="row">
<section class="4u 6u(medium) 12u$(small) cusfont">
<h1 style="visibility:hidden">Example</h1>
<div>
<p>
<label class="btn" for="modal-1"><i class="fa fa-circle" id="module-circle"></i> Example1</label>
</p>
</div>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div>
</div>
</section>
<section class="4u 6u$(medium) 12u$(small) cusfont" >
<!-- <div class="drivers-table2">
<div class="head-section1">
<h4><i class="fa fa-users"></i>Heading </h4>
</div>
<p class="batch">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div> -->
<div>
<p>
<label class="btn" for="modal-2"><i class="fa fa-circle" id="module-circle"></i> Example2</label>
</p>
</div>
<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-2"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-2"></label>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</section>
</td>
<td style="width: 10%;"></td>
</tr>
</table>
How can this page layout will be show mobile version only without refresh page using javascript.
mobile version only will show this page without refresh
You can use one of these coding languages (JS, .htaccess, PHP):
JS:
if (screen.width <= 699) {
document.location = "mobile.html";
}
Source: https://css-tricks.com/snippets/javascript/redirect-mobile-devices/ <= This might be the one your looking for.
.htaccess:
RewriteEngine On
# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]
# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
# had to check, but I believe most mobile devices should send at
# least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile} !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST} !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie} !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]
Source: Mobile Redirect using htaccess <= This is a little complex but, it works
PHP:
<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>
http://www.designyourway.net/blog/resources/detecting-and-redirecting-mobile-users/ <= Just an extra.
Good Luck!
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The webiste (not even close to being finished) is
www.lzkconcepts.com.
The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox, IE), however, on the iPhone/iPad there is a tiny gap/space between the "content" div and header and footer. I'm using a background image in the header, content, and footer divs to create the outline of the page. In addition to the gaps between the divs, the content background image is sometimes "shrunk" a little, so that it doesn't line up with the header and footer on the right side of the screen. If I zoom in though, everything lines up perfectly. Here's a screenshot taken from the iPhone...
http://s1139.photobucket.com/albums/n545/lhkimbrough/?action=view¤t=7198e49b.jpg&evt=user_media_share
Look closely at the right side below the blue navigation bar.
Here's the CSS (I know it's very rough, I'm just learning)
#charset "UTF-8";
body {
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #CCC;
}
.TableAppName {
color: #007EB4;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
#h-navbar {
font-size: 95%;
background-color: #CCC;
background-image: url(images/navBarBlue.png);
background-repeat: no-repeat;
text-align: right;
padding-right: 20px;
color: #FFF;
height: 39px;
padding-top: 6px;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 874px; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #CCC;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #CCC;
background-image: url(images/BannerFadedBlueAndOrangeText.png);
background-repeat: no-repeat;
height: 165px;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
background-color: #CCC;
background-image: url(images/contentFadedDark4.png);
background-repeat: repeat-y;
padding-left: 15px;
}
.contentBottom {
padding: 0px;
margin: 0px;
}
/* ~~ The footer ~~ */
.footer {
background-color: #CCC;
background-image: url(images/FooterFadedDark.png);
background-repeat: no-repeat;
text-align: right;
font-size: 80%;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#h-navbar a, #h-navbar a:visited {
text-decoration: none;
color: #FFF;
}
#h-navbar a:hover {
color: #ea6828;
}
.footer p {
color: #0075A7;
}
.content h1 {
color: #0074A9;
font-weight: normal;
font-size: 200%;
font-style: normal;
padding-top: 15px;
padding-left: 23px;
}
.graytext {
color: #333;
}
And here's the HTML
<!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"><!-- InstanceBegin template="/Templates/LZKConcepts_Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>LZK Concepts</title>
<!-- InstanceEndEditable -->
<link href="LZKConcepts_styles.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --></div>
<div id="h-navbar"> Home | QuickGrader | Wish On A Star | About Us | Contact Us </div>
<!-- InstanceBeginEditable name="MainContent" -->
<div class="content">
<h1>
<!-- end .content -->
iPhone Apps</h1>
<table width="844" border="0">
<tr>
<td width="160" rowspan="2" valign="top"><img src="images/QuickGraderIconReflected140.png" alt="QuickGrader" width="120" height="154" hspace="20" /></td>
<td width="482" class="TableAppName">QuickGrader</td>
<td width="188"> </td>
</tr>
<tr>
<td height="127" valign="top" class="graytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
<td align="right" valign="top"><br />
<img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" vspace="0" align="right" /></td>
</tr>
</table>
<p> </p>
<table width="844" border="0">
<tr>
<td width="160" rowspan="2" valign="top"><img src="images/Wish On A Star Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></td>
<td width="482" class="TableAppName">Wish On A Star</td>
<td width="188"> </td>
</tr>
<tr>
<td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
<td align="right" valign="top"><br />
<img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></td>
</tr>
</table>
<p> </p>
<table width="844" border="0">
<tr>
<td width="160" rowspan="2" valign="top"><img src="images/Wish On A Star Free Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></td>
<td width="482" class="TableAppName">Wish On A Star Free</td>
<td width="188"> </td>
</tr>
<tr>
<td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
<td align="right" valign="top"><br />
<img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></td>
</tr>
</table>
</div>
<!-- InstanceEndEditable -->
<div class="footer">
<p><br />
<br />
<br />
Copyright © 2010, LZK Concepts. All rights reserved.</p>
</div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
Does anyone have an idea why the iPhone and iPad are rendering the page like this?
On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu.
The solution I found is to add a "margin: -1px" between divs. Divs backgrounds overlap with 1 pixel, and if slicing is done accordingly, its invisible for a classic browser, and corrects the problem on the iPad.
Use:
meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
for when a website is being displayed on a tablet or other device. That should get rid of the pixel difference you see. Sites should be designed semantically scalable these days for maximum cross device access.
As for me, I normally build a php device detecter if there absolutely needs to be a work around.