The following is a shortened version of the real code. I use PhoneGap to implement an algorithm that takes my 2 designs - one for portrait and one for landscape - and switch between them as needed, including automatic scaling to the center of the specific screen. It works great on Android, but there appears to be some unexplained corruption of the tab graphics on iPhone, upon switching between modes (portrait / landscape) and clicking the tabs.
The HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js"></script>
</head>
<body>
<div id="main" class="main">
<div id="ext" class="extPortrait">
<div id="tabDiv1" class="tabDiv1Portrait">
<img id="tabImg1" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt1" class="tabTxt">Tab1</div>
</div>
<div id="tabDiv2" class="tabDiv2Portrait">
<img id="tabImg2" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt2" class="tabTxt">Tab2</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
The CSS:
body {direction:ltr; margin:0; border:0; padding:0;
background-color:#c9c9c9; font-family:Calibri,Arial;
font-size:14px; color:#0070b8; overflow:auto;}
.main {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
background-color:#c9c9c9; overflow:hidden; z-index:10;}
.extPortrait, .extLandscape {display:block; position:absolute;
margin:0; border:2px solid; border-radius:6px; padding:0;
background-color:#f4f4f4; border-color:#bcbcbc; z-index:20;}
.extPortrait {top:3.409%; left:4.444%; width:90%; height:93.344%;}
.extLandscape {top:6.25%; left:2.5%; width:94.375%; height:87.798%;}
.tabDiv1Portrait, .tabDiv2Portrait, .tabDiv1Landscape, .tabDiv2Landscape
{display:block; position:absolute; margin:0; border:0; padding:0;
overflow:hidden; cursor:pointer; z-index:30;}
.tabDiv1Portrait, .tabDiv2Portrait
{top:-1.913%; width:21.605%; height:7.304%; font-size:2.922%;}
.tabDiv1Landscape, .tabDiv2Landscape
{top:-3.729%; width:23.179%; height:14.237%; font-size:5.357%;}
.tabDiv1Portrait {left:8.642%;}
.tabDiv2Portrait {left:31.481%;}
.tabDiv1Landscape {left:4.636%;}
.tabDiv2Landscape {left:28.477%;}
.tabImg {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
cursor:pointer; z-index:40;}
.tabTxt {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
line-height:233%; color:#ffffff; text-align:center;
cursor:pointer; z-index:50;}
The JavaScript:
var PMYWID = 360, PMYHIG = 616; //sizes of my portrait design
var LMYWID = 640, LMYHIG = 336; //sizes of my landscape design
var scrWid = 0, scrHig = 0;
var portrait = true;
var tabNum = 0;
(function() {
window.onload = function() {
mobilePeriodicCheck();
tab1Clk();
document.getElementById("tabDiv1").addEventListener("click", tab1Clk);
document.getElementById("tabDiv2").addEventListener("click", tab2Clk);
//document.getElementById("main").style.display = "block";
}
}());
function mobilePeriodicCheck() {
var scrWidNew = window.innerWidth, scrHigNew = window.innerHeight;
if ((scrWidNew != scrWid) || (scrHigNew != scrHig)) {
scrWid = scrWidNew;
scrHig = scrHigNew;
portrait = (scrWid <= scrHig);
var wid,hig,lef;
if (portrait) {
if (scrWid/scrHig <= PMYWID/PMYHIG) { wid = scrWid; hig = Math.floor(PMYHIG*scrWid/PMYWID); lef = 0;}
else { wid = Math.floor(PMYWID*scrHig/PMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
else {
if (scrWid/scrHig <= LMYWID/LMYHIG) { wid = scrWid; hig = Math.floor(LMYHIG*scrWid/LMYWID); lef = 0;}
else { wid = Math.floor(LMYWID*scrHig/LMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
var id = document.getElementById("main");
id.style.width = wid + "px";
id.style.height = hig + "px";
id.style.left = lef + "px";
id.style.fontSize = hig + "px";
document.getElementById("ext").className = portrait ? "extPortrait" : "extLandscape";
document.getElementById("tabDiv1").className = portrait ? "tabDiv1Portrait" : "tabDiv1Landscape";
document.getElementById("tabDiv2").className = portrait ? "tabDiv2Portrait" : "tabDiv2Landscape";
document.getElementById("tabImg1").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
document.getElementById("tabImg2").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
}
setTimeout(mobilePeriodicCheck, 1000);
}
function tab1Clk() { tabClk(1); }
function tab2Clk() { tabClk(2); }
function tabClk(iTab) {
if (iTab!=tabNum) {
if (tabNum > 0) {
document.getElementById("tabImg"+tabNum).style.WebkitFilter = "brightness(100%)";
document.getElementById("tabImg"+tabNum).style.filter = "brightness(100%)";
}
document.getElementById("tabImg"+iTab).style.WebkitFilter = "brightness(135%)";
document.getElementById("tabImg"+iTab).style.filter = "brightness(135%)";
tabNum = iTab;
}
}
After playing a lot with this, I think I found the problem: At least one of style.WebkitFilter and style.filter causes rendering problems in iOS WebView. I switched to simply changing the src of the image, and that worked perfectly on both platforms.
According to the W3C styling guide for css/svg (https://www.w3.org/TR/SVG2/styling.html) I should be able to position certain svg elements within css using the x/y attributes.
This works with chrome + the Samsung Galaxy S6 (not tried other models/browsers). However, this doesn't work in iOS and some window/htc devices that I've tried.
Here is the code I'm using (with the help of d3.js);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<style>
#media handheld,
screen and (max-width: 425px) {
foreignObject {
x: 30;
y: 30;
}
}
</style>
</head>
<body>
<script>
d3.selectAll("body")
.append("svg")
.append("foreignObject")
.attr("width", 30)
.attr("height", 30)
.attr('x', 0)
.attr('y', 0)
.html("hello")
</script>
</body>
</html>
Here is a plnk of the code also.
I was wondering if there was any kind of workaround for this? or if someone could recommend another way of adding responsive breakpoints for the x/y?
Thanks
The feature you're referring to is SVG 2. SVG 2 is still in Working Draft stage. Browser vendors are implementing features, but I wouldn't put anything into production that relied on SVG2 features. Even caniuse.com hasn't introduced a 'can i use SVG 2' section yet. They're discussing it here.
Now to answer your question :)
Option 1
If you only want to move whole SVG chunks around the page, then you can use HTML for your responsive layout and SVG within that. Something like:
<div class="responsive-wrapper">
<svg width="100%" height="200">
<rect x="10" y="10" height="200" width="200"/>
</svg>
</div>
<div class="responsive-wrapper">
<svg width="100%" height="200">
<rect x="10" y="10" height="200" width="200"/>
</svg>
</div>
Then
.responsive-wrapper {
border: 1px dashed lightgray;
width: 100%;
}
#media screen and (min-width: 500px) {
.responsive-wrapper {
float: left;
width: 48%;
}
}
rect {
fill: steelblue;
}
Option two
https://jsbin.com/xesuma/1
is JavaScript, is more complex, and isn't going to scale well.
<svg width="100%" height="200">
<rect id="rect-1" x="10" y="10" height="200" width="200"/>
</svg>
and something kinda nasty like:
var rect1El = document.getElementById('rect-1');
var currentWidth = rect1El.getAttribute('width');
window.addEventListener('resize', function() {
var newWidth = window.innerWidth > 400 ? 300 : 100;
if (newWidth !== currentWidth) {
rect1El.setAttribute('width', newWidth);
currentWidth = newWidth;
}
});
I have an element that is fixed to the top of the page, and scrolls with you when you scroll horizontally.
But in ios width of menu are not a 100% width of viewport. Width of menu is a 900px.
What's a problem? I can set width with JS, but it not true way. At the android devices it's ok, and work great.
body
{
padding: 0;
margin: 0;
}
.menu
{
position:fixed;
width: 100%;
top: 0;
left: 0;
background-color: grey;
color: #fff;
}
.content800
{
width: 800px;
height: 200px;
background: green;
}
.content900
{
width: 900px;
height: 200px;
background: blue;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class='menu'>Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2</div>
<div class="content800"></div>
<div class="content900"></div>
</body>
</html>
How can I set width of fixed menu by 100% of device screen?
Most likely because you are causing the page to overflow due to .content800 and .content900, when using responsive design you should avoid setting any 'fixed' widths that exceed the devices resolution in either portrait or landscape. You have the viewport set in the HTML but you don't have any media queries in your CSS.
You really need to make use of the media queries using something like this:
#media screen and (max-width: 63.9375em) {
.content800, .content900 {
width:100%;
}
}
You may need to change 63.9375em to your liking as its all small devices in both landscapes, portraits and also tablets in portrait mode. If that doesn't fix your problem then it'll something else that you have failed to attach, like the rest of your CSS or HTML.
What you could do is set right: 0; to .menu, to make sure the menu covers the whole screen width.
I have two media queries:
<link rel="stylesheet" media="only screen and (orientation: landscape)" href="/stylesheet/landscape.css" />
<link rel="stylesheet" media="only screen and (orientation: portrait)" href="/stylesheet/portrait.css" />
In the first, one of the classes has a property that is not in the second:
/* This is how it is in landscape */
.myClass { position: relative; border-right: 1em solid red; }
/* This is how it is in portrait */
.myClass { position: relative; }
Even loading the page in portrait view, it shows a border on the right! I can put the border property in portrait view to override this but is there any way to make Safari not apply the landscape css at all when it's in portrait?
...just add in portrait view:
myClass { position: relative; border-right:0 }
edit: explanation: this happens because both files are loaded and all properties are applied in the same class. The position is overridden by the same name class in the second file but nothing overrides the border-right property.
I'm developing an app using Worklight 6.2 where the layout has a fixed field of research in the header, when this field receives focus, the virtual keyboard of the operating system is presented.
Running this app on iOS (iPhone 4 and iPhone 5 the layout is larger than the screen) when the layout is not the beginning (was rolled down), the div and input that were fixed at the top (position: fixed) lose this configuration and are similar to absolute layout. Another problem is that the header (div and input), automatically cut some pixels, going to the center of the screen and was hidden divs that appear scrolling the page.
Below the prints of some situations and the source code with the problem.
Without showing the virtual keyboard (correct layout)
When show a virtual keyboard with layout rolled down
When does scroll the page with the virtual keyboard showing (Lose the configuration layout: fixed and apparently assumes the configuration layout: absolute)
My code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
{
margin: 0;
padding: 0;
font-family: 'MuseoSans-100';
}
/* Worklight container div */
body {
height: 100%;
width: 100%;
}
.div-header {
height: 200px;
width: 100%;
background-color: #0094D9;
position: fixed;
}
.input-header {
margin-top: 100px;
height: 40px;
width: 100%;
}
.div-body {
height: 500px;
width: 100%;
}
.div-body-1{
background-color: #ffff9f;
}
.div-body-2{
background-color: #1b8127;
}
.div-body-3{
background-color: #fb7d00;
}
</style>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="wrapper">
<div class="div-header">
<label class="span-header">Hello Worklight</label>
<input maxlength="50" id="txtSearch" type="text" placeholder="BarCode" class="input-header">
</div>
<div id="div1" class="div-body div-body-1">
Div 1
</div>
<div id="div2" class="div-body div-body-2">
Div 2
</div>
<div id="div3" class="div-body div-body-3">
Div 3
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The issue of screen distortion due to virtual keyboard can be resolved by adding $('body,html').animate({scrollTop:0},'fast'); either on the screen-size change event or in case if the keyboard hides on touching any element then on onclick event.
I had the same issue, adding this plugin to the project fixed it!
https://github.com/apache/cordova-plugins/tree/master/keyboard
After adding it, set Keyboard.automaticScrollToTopOnHiding = true;
and it will do the trick