I overlooked all the web ( i guess) and tried to find the solution for this task:
I have all requirements to show a correct content on mobile(I mean meta media and css media and so on), but on my android phone I can scroll to the right. I checked if there are no divs with width more than 320px. Website I'm talking about is http://vasiliib.p.ht/leverage/
I tought this is cause my page content and created a separate page http://vasiliib.p.ht/leverage/mobile.html. Here I inserted simple html code. And, there is the same problem..
I am frustrated .. Please clean my eyes..and show me my mistake, please..
looking forward for your reply.
regards.
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
This is the correct answer. It works perfectly.
body{
margin:0px;
}
should read:
body{
margin:0 auto;
}
Where are you handling you're responsive design stuff?
Also this:
.bg-course-content-02 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-02.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
This:
.bg-course-content-04 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-04.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
and this:
.bg-course-content-06 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-06.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
check your widths..
Have you included the meta tag inside the head tag of the HTML?
<meta name="viewport" content="width=device-witdh, initial-scale=1">
that meta tag set the width of the page to the width of your device.
Related
I know there are various similar threads on this but none answer my question. Please look at this most simple HTML code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
height: 100%;
background: linear-gradient(to top, blue, white);
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
Viewed in Chrome for PC (either in normal view or in mobile simulator view) it produces a gradient background that covers the whole screen. Viewed in Firefox mobile for Android or Chrome mobile, the website has a white space at the bottom the size of the address-bar. It either appears right away or it appears when you attempt to scroll the page. Why is it there and how do I get rid of it?
i had the same Problem till hours before.
Set body-height not 100vh, but 100%.
body,html{ padding: 0; margin: 0; height: 100%; } (No background input here!)
In your html document you have to put in a new image-Tag('<'img id="image"'>')
At the end in CSS:
#image{ height: 100vh; background-image: url(..); z-index:-1; background-size: cover; }
So i found out, that 100% is smaller than 100vh actually, what actually kills the white bar at the bottom on android browser while scrolling out the navibar.
Sorry for my broken english. Greetings from germany. xD
We tries to print a webview content over google cloud print, but no matter what we do the resulted printout adds some margin.
Is there a way to remove this margin?
We tried:
<body style="margin: 0; padding: 0">
then
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
then
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
none worked...
Use the following code to remove margins when printing the WebView.
#page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
Just Use It *{margin:0px; padding:0px} Add In Your Style Sheet And Check Once
*{margin:0px; padding:0px}
body,html{padding:0px;margin:0px;}
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
By Default HTML web pages have a padding and margin of 10px; You have to set in your head section or or css file:
<style type="text/css">
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
It's work for me. Hope it will help you :)
or you can try another one:
Replace your tag with this one:
<body style='margin:0;padding:0;'>
Here's another tip for images in a webview: add a styling that fits images in the width of the screen. Works great on all screen sizes:
<style type='text/css'>
img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}
</style>
If using the css doesn't solve your issue, you can try using a TextView with fromHtml instead of using a webview:
TextView myTextView = (TextView) view.findViewById(R.id.my_textview);
Spanned textviewHtml;
//Note : fromHtml needs a display flag as second argument from API 24
if (Build.VERSION.SDK_INT >= 24) {
textviewHtml= Html.fromHtml(yourHtmlHere, Html.FROM_HTML_MODE_COMPACT);
}
else {
textviewHtml= Html.fromHtml(yourHtmlHere);
}
myTextView.setText(textviewHtml);
For more options on fromHtml you can refer to https://developer.android.com/reference/android/text/Html.html
Hope this helps! ;-)
I'm developing a webapp with Cordova. All is fine for the moment except that in one screen, I have a div with this position:
position: absolute;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
left: 0;
right: 0;
top: 300px;
bottom: 40px;
In my browser (computer or smartphone), the element is correctly positioned but in the built app, the element is something like 10 pixels below.
Here is the meta "viewport":
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi">
Does anyone can help me for that? I really don't know why the pixels are not respected.
I found the solution. Never use "line-height" to specify the "height" of an element. For some reason, in the built app (not in a browser), the output height of the element is not corresponding to the line-height.
I hope this will help someone...
I have a box with a border.
border: 1px solid #000;
I am using the following viewport setup:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
The border seems to be 2 pixels on the top and right side.
What is the reason for this?
Additional: there are no other CSS rules other than a width and height.
The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density.
How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match.
This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
div {
border-width: 0.5px;
}
And similar techniques are shown here:
http://n12v.com/css-retina-and-physical-pixels/
https://developer.android.com/guide/webapps/targeting.html
"Could you modify your answer to make it working for all devices, regardless the DPI? Would be super useful! – Basj"
i dont know how much this helpfull
here i added a custom function to get border size on almost all dpr
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Ratio</title>
<style>
.bord {
width: 300px;
height: 300px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="bord"> </div>
<script>
dprof("bord");
function dprof(elmclass){
var z =document.getElementsByClassName(elmclass).length;
var dpr = window.devicePixelRatio;
for(i=0;i<z;i++){
document.getElementsByClassName(elmclass).item(i).classList.add("dpr-"+dpr);
var bw =getComputedStyle(document.getElementsByClassName(elmclass).item(i),null).getPropertyValue('border-width');
var nw =bw.replace("px","");
var nbw=nw/dpr;
console.log(nbw);
if(nbw!=0){
document.getElementsByClassName(elmclass).item(i).style.borderWidth=nbw+"px";
}
}
}
</script>
</body>
</html>
Unless you have a very good reason for it (doubtful), disabling user-zoom is a very bad idea. See user-scalable=no … Evil or Slightly Not Evil? for examples of why this is bad. It also gives some examples where user-scalable=no is perfectly acceptable.
for a 1.5 pixel-ratio, try
#media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
div {
border-width: 0.75px;
}
}
I'm trying to make my blogs readable on an android browser, but it always ends up needing to scroll horizontally. Right now, my solution is working in chrome so that when I resize the window to a width smaller than the article content the article will shrink with it without a horizontal scrollbar. You can see an example of a blog article here.
If I do this:
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; minimum-scale=1.0; user-scalable=yes;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
#container {
max-width: 650px;
margin: auto;
}
</style>
</head>
<body>
<div id="container">Content goes here.</div>
</body>
then it works as seen here, but something else in my page is messing things up. In chrome, I'm getting the effect I want, but when I open the page on an android browser I have to scroll horizontally.
Edit: I traced this down to the facebook iframe. Anyway to get around this?
I have the same issue occasionally where android completely ignores overflow command. I think the first issue is using overflow hidden on the body, and not an internal element.
I would change:
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
#container {
max-width: 650px;
margin: auto;
}
</style>
To this:
<style type="text/css">
body {
margin: 0;
}
#container {
overflow: hidden;
max-width: 650px;
margin: auto;
}
</style>
Be careful what goes into the actual "#container" div. While it will probably display off screen, I was never able to fix a bug with object tags (flash video players). Over flow is a pain for mobile. If possible, I would develop fluid and go from there. No real need to set a max-width in that case -- and it will allow the user to browse the website as they want.