Do anyone know how the css work on mobile? I tried to declare any statement below one by one but no luck.
#font-size-base: 20px;
body {
-webkit-text-size-adjust: 100%;
}
Refer to the image I attached, the font-size was redeclared 2 times from html {10px} to body {16px} and then to p {16px}, but finally it was changed to 28.8px, it is very large on mobile.
In the head, I do declare the meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
I can't find which statement change the font-size to 28.8px. Please help.
Related
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
My actual iPhone was displaying a super-small font-size for part of my web-site.
I found that the following solved it:
<meta name="viewport" content="width=device-width, initial-scale=1">
and
body {
-webkit-text-size-adjust: 100%;
}
I do not understand why these work ... any clues?
Appreciate the help in advance.
http://demo.dev.rbmleads.com/personalloan/v10/
I made a mobile version of a form for work but can't figure out why it's stretched out like this. It's supposed to look like this:
but instead it looks like this:
I thought it was a stray element in there with a set with but all the elements are set to auto or a %. Any idea? Thanks.
Are you declaring the viewport meta tag?
Add this to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you need to disable zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Make sure you set the meta tag
<meta name="viewport" width="device-width" />
this will make your 100% a little closer to 100%
there are a few other parameters you can set like initial zoom and heights but I think this width will solve your problem
EDIT: One additional thing you can try is to query width and set the font size
example of some LESS:
html,body{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 16px;
#media only screen and (max-width : 600px) {
font-size: 11px;
}
}
Basically this sets your base font to 16px on a phone and 11px on a desktop.
Maybe it is just the resolution try Ctrl + Shift + M in Firefox. Also set <meta name="viewport" content="width=device-width, initial-scale=1.0"> and play with the scale.
Your sandbox is not reachable, which makes it hard to find the issue.
I'm currently working on a Phonegap app and I have the following problem when testing it with Windows Phone 8 (left screenshot below): the application bar is not removed and leaves a big white space.
From various sources I learned that the following meta tag is ignored by WP8:
<meta name="viewport" content="width=device-width, height=device-height">
So you have to define it again using the "ms" pre-tag:
#-ms-viewport {
height: device-height;
width: device-width;
}
But doing so kind of messes up with the scaling of the app. Any idea what is going on?
Here the before after screenshot:
Include this in Index.html,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
Include this in CSS:
#viewport
{
width:320px;
}
#-ms-viewport {
width:320px;
zoom-user:fixed;
max-zoom:1;
min-zoom:1;
}
and include also this,
body, html {
-ms-overflow-style: none !important;
}
This will solve the issue for now, it worked for me in the same situation..!!
:-)
You can take this code to your css:
* {
zoom:1;
-ms-content-zooming:none;
}
This solved the problem for me.
There is a plugin available for the viewport fix:
http://plugreg.com/plugin/lisovin/cordova-wp8-viewport
Table bug fixed: I was missing thead and tbody tags!
I have a weird problem with Bootstrap. Everything works perfectly fine, but when I try to use table-hover class it just does not work. Also, the table has upper border: http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png
Also, when I resize the Chrome browser, the navigation bar looks like this:
http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png
instead of normal 'mobile' look on getbootstrap.com site.
I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
Code:
<table id='keytable' class='table table-hover'>
<tr><th>sv_licensenum</th><th>Type</th><th>Key</th><th>Description</th></tr>
<tr><td>0</td><td>Ranked</td><td>alrCOdo8PsFUur6iZmIlESd7</td><td>test2</td></tr>
<tr><td>1</td><td>Ranked</td><td>VLnNg25kSZRB4IzNpufu0qIs</td><td>test456</td></tr>
</table>
id="keytable" is not specified in any external non-Bootstrap CSS file/code. it is only used for Javascript.
After inspecting the file carefully I have figured the reason for this weird behavior.
You need to remove the style you have defined in you html. This is the reason the navbar gets a padding when you reach 979px or less. You can consider defining this through #media or media-query
body {
padding-top: 60px;
background-color: #f5f5f5;
}
And then you have to remove the style
nav-collapse collapse
This will hide whatever you put inside this.
Read http://getbootstrap.com/2.3.2/components.html#navbar
Hope this solves your problem.
I hope you have also included the required bootstrap js files. I did not get any issues when I tested the code you provided.