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.
we are making an HTML5 app where width is not know at design time.
So we change the viewport tag at runtime to match the desidered size.
e.g.
<meta name="viewport" id="viewport-meta" content="width=' + params.mobilePortraitWidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The problem on iOS is that after we change the viewport size, view is not correctly scaled until we double tap the screen.
EDIT, after double tap is all fine, so: how can we "DOUBLE TAP" programmatically?
Thank you very much
NSString *js = #"var t=document.createElement('meta'); t.name="viewport"; t.content="initial-scale=1.0, maximum-scale=3.0"; document.getElementsByTagName('head')[0].appendChild(t);";
[myWebView stringByEvaluatingJavaScriptFromString:js];
EDIT
Thanks for update.
I had very similar issue and remember that setting viewport meta tag solved it.
If you are trying to modify this meta tag just after loading html, try doing that in webViewDidFinishLoad (loadRequest is asynchronous).
Another solution would be to read your html file into NSString and replace that meta tag before loading it to webView.
Hope it helps!
Thank you very much for your replies, I would like to share the solution we found after some test on iPhone 5s with iOS 9.2 and iPad Air with iOS 8.4.
Basically, to make it work, we didn't set initial-scale=1.0, maximum-scale=1.0, user-scalable=no
Following a working example
<html>
<head>
<meta name="viewport" id="viewport-meta" content="width=device-width, user-scalable=no" />
<style>
html, body { -webkit-text-size-adjust: 100%; }
h1 { padding: 1em; background-color: #FF80BB; }
</style>
</head>
<body>
<h1>I am the page content</h1>
<button id="s320">Set 320</button><br />
<button id="s640">Set 640</button><br />
<button id="s960">Set 960</button>
<script>
function setViewportWidth(newWidth) {
var m = document.getElementById("viewport-meta");
m.setAttribute('content', 'width=' + newWidth + ', user-scalable=no');
}
document.getElementById("s320").onclick = function () { return setViewportWidth(320); };
document.getElementById("s640").onclick = function () { return setViewportWidth(640); };
document.getElementById("s960").onclick = function () { return setViewportWidth(960); };
</script>
</body>
</html>
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
My problem is for my webpage designed for iOS. When testing on iPhone 5 (Safari) it loads fine in portrait mode then flips fine to landscape mode. But when going back to Portrait from Landscape it zooms in. I don't have this issue with iOS Chrome thought.
I've tried lots of different meta tags like :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
But they seem to only cover the opposite issue of going from portrait to landscape zooming.
Some help would be greatly appreciated. I've spend many hours searching without success.
Here's a link if you wish to try it on a mobile device: http://www.blueberry-studio.co.uk/Robomoco_Websites/Device_iPhone_5/
and here's the code used:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="viewport" content="user-scalable=no, width=1280" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style type="text/css">
#media screen and (orientation:portrait)
{
#robomocomobileportrait_hype_container {
display: block;
}
#robomocomobilelandscape_hype_container{
display: none;
}
}
#media screen and (orientation:landscape)
{
#robomocomobileportrait_hype_container {
display: none;
}
#robomocomobilelandscape_hype_container {
display: block;
}
}
</style>
<div id="robomocomobileportrait_hype_container" style="position:relative;overflow:hidden;width:1280px;height:2260px;">
<script type="text/javascript" charset="utf-8" src="Robomoco_mobile_portrait.hyperesources/robomocomobileportrait_hype_generated_script.js?71837"></script>
</div>
<div id="robomocomobilelandscape_hype_container" style="position:relative;overflow:hidden;width:1280px;height:720px;">
<script type="text/javascript" charset="utf-8" src="Robomoco_mobile_landscape.hyperesources/robomocomobilelandscape_hype_generated_script.js?17049"></script>
</div>
I've found a way that resolves my problem:
var alsoenlarge = true;
$(function(){
if(isScalePossible()){
$('body').css({overflow:'hidden'}); //geen scrollbars
$('#scalecontainer').css({position: 'absolute', margin: 0}); //centreren met de hand na resize
// Run scale function on start
scaleSite();
scaleSite();
// run scale function on browser resize
$(window).resize(scaleSite);
}
});
function scaleSite()
{
windoww = $(window).width();
sitew = $('#scalecontainer').width();
f = windoww/sitew;
if(!alsoenlarge && f>1) f = 1;
$('#scalecontainer').css({
"-moz-transform" : "scale("+f+")",
"-webkit-transform" : "scale("+f+")",
"-ms-transform" : "scale("+f+")",
"-o-transform" : "scale("+f+")",
"transform" : "scale("+f+")",
"left" : ((windoww-(sitew*f))/2)+"px"
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
And my content in this div:
<div id="scalecontainer"> </div>
Foo.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
The appearance of the text is good. This image should be centered, but it isn't:
<img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img>
</body>
TestStyle.css:
body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
margin-left: auto;
margin-right: auto;
display: block;
}
Result:
Try:
.centerblock {
position:fixed;
top:10px;
left: 10px;
}
Maybe that can help, Although i don't know what can happen if you turn the phone.
I would make that main content area to fit to the edge of display and define all align properties for each element.
It's never very smart to do:
body {margin-left:30px;}
body {margin-right:30px;}
There is also option:
.main-container {
margin: 0 auto;
}
That also centers all the content but i think, also would not solve your problem.