So I am trying to develop a simple mobile website. It will go off a QR code to the page linked below. The problem is when I view it on my android phone, or apple phone it adds a huge width. Any suggestions would be great. Here's the link to the live version: http://www.trileafweb.com/promotion/index.html
Here's the HTML/CSS
Promotion
<style>
html,body
{
width: 400px;
height: 200px;
}
h1{color:#00a94f;
text-align:center;}
p{
font-weight:bold;
font-size: 14;
text-align:center;
font-family:Arial;}
img{
position:relative;
height:100px;
width:200px;
padding-left:100px;}
#coupon{
padding-top:15px;
position:relative;
border: 3px dashed;
width: 400px;
height:200px;
border-radius:5px;}
</style>
</head>
<body>
<div id="coupon">
<h1>Promotion</h1>
<p>Promotion Texts</p>
<p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
</div>
</body>
Are you including a meta tag telling the mobile browsers that you understand how their viewports work? Something like this:
<meta name="viewport" content="width=device-width" />
More information about why this is necessary:
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page....
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.
Related
Hi everyone.
I'm currently working on a website for my company, and right now I'm facing a problem with the navigation menu, specifically on mobile devices, or should I say, mobile browsers(most of them).
The hamburger icon is clickable when the browser's search bar is expanded, but becomes irresponsive when scrolling down(as the search bar becomes shrank).
It does work however on Chrome browser, as it doesn't shrink the search bar, but any other browser that I have tried refuses to do so. (Safari, Firefox, Samsung Browser, etc.)
I'm not sure how can that affects the hamburger menu, as it works perfectly on Chrome/Safari with Inspect element on mobile modes.
Here is my website (still work in progress)
From my current testing, I suspect your navigation pop up menu is slightly too big to pop up in Mozila Firefox default mobile size. If I flip the mobile size to landscape, you will be able to see the responsive of your navigation menu.
I will suggest you to try make the navigation menu to be smaller in width in your css code which will solve your issue with minimal editing.
Again just suggesting only this may not be the best solution but I personally feel that it works.
Regards,
JJSIMCYBERTECH.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div class="nav">
<h1>(Website Name)</h1>
<input type="search" class="searchbox">
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
</div>
<style>
.nav{
background-color: lightgreen;
border: 2px solid white;
/* choose your color */
color: red;
}
.searchbox{
background-color: gray;
width: 300px;
height: 35px;
color: white;
}
.btn{
border: none;
background-color: #184a26;
}
.btn:hover{
padding: 5px;
}
</style>
</body>
</html>
I'm using this code for my website header:
<!DOCYTYPE>
<html>
<head>
<style>
#image_header {
border-radius:20px;
user-drag:none;
user-select:none;
-moz-user-select:none;
-webkit-user-drag:none;
-webkit-user-select:none;
-ms-user-select:none;
height:100%;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
#header_image {
width:100%;
height:150px;
overflow:hidden;
position:relative;
border-radius:30px;
}
</style>
</head>
<body>
<div id="header_image"><img id="image_header" src="http://static.adzerk.net/Advertisers/78e105390cf2426896c5fc38ae85a4f6.png"></div>
</body>
</html>
That code cuts the header image on both sides, left and right, when the browser window is smaller than the image.
I tested it on several devices and systems and it's working very well.
There's only a bad display on iPhone 3GS running the newest possible version 6.1.6. This is how it looks like:
Does anybody know why this does happen? How can I fix it?
The problem probably lies in using CSS's transform. You can check it over here:
http://caniuse.com/#feat=transforms2d
Since it's 3Gs iPhone, i suppose you do check you browser's support.
Do try adding prefix -webkit-transform: translateX(-50%) else give a change on using position for transformationbackground-position: center;
.header{
z-index:3;
position:fixed;
width:100%;
height:10%;
top:0px;
background-color: white;
}
.header .header-bg {
background-color: rgba(248,221,225,0.7);
display:table;
margin:auto;
height:30px;
width:30%;
}
.header .title-center{
text-decoration: underline;
position:absolute;
margin:0;
left:50%;
top:60%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<link rel="stylesheet" href="css/index.css">
<div class="header">
<div class="header-bg"> </div>
<div class="title-center">header</div>
</div>
</body>
</html>
When I developed a web page, I tested it using Chrome. After finishing, I tested it with firefox/IE/Edge, and found the font-size are much smaller than it used to be in Chrome. When I checked the debug tool on Firefox, it seemed that the size of the same div is not the same for firefox and chrome. Actually, the difference is great.
More wierd, when I click into a modal in chrome, and refresh the window, the path changed to index.html#, then, the layout and div size is almost the same as the other browsers.
Anyone has idea why this happened? and How to deal with it? Thanks in advance!!
The following is part of my code for header.
You should add any default font-family in your css after that you can see same fonts on all browser
and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!
a) Each browser will have their own default font size predefined.
1) For chrome : Setting > Show Advanced setting > Web Content > Font size
2) For Firefox : Tools > Options > Content > Fonts & Color
Whenever the CSS doesn't have font size mentioned in their styles, browser will use their predefined default font size. Better define font-size in your CSS.
b) index.html# issue
Whenever you click on any clickable elements usually anchor hyperlink, browser tries to navigate to that page or section where the href="" if pointing. When a hyperlink doesn't have href="" we'll get "#" as a dummy pointer. Example
Test link or Test link
Refer : https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Each web browser has different defaults for font so you want to reset you CSS before adding your custom style.
Have a read of http://cssreset.com/what-is-a-css-reset/
The problem may be initial values of some elements that differ through browers. The easiest and most reliable way to solve it would be using something like Normalize.css.
I've got a problem with responsive design on mobile devices, please take a look at the code and the pictures. The difference between these two are the font-size of the html root element, I set one with percentage and the other one with px, but the one with percentage doesn't work in the right way while the one with px works just fine. And the numbers in the pictures indicates the width of the red div. According to the first part of my CSS code, the width of the div should be 320px in the first picture, but it is 450 and it will not change unless I set the font-size to a percentage larger than 52.1% or something, I don't remember the exact number, why is that? why the rems do not scale in the right way on mobile devices when setting font-size of root element by percentages? Please help.
HTML
<!DOCTYPE>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script src = "main.js"></script>
<head>
<body>
<div id="div">Hello</div>
<div id="info"></div>
</body>
</html>
First Css
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:40%;}
body{background:blue;}
}
Second CSS
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:6px;}
body{background:blue;}
}
The result on my iphone for the first part of my code
The result on my iphone for the second part of my code
html{font-size:16px;}
body{font-size:62.5%;}
You need to ask yourself 62.5% of what? The default browser font size is html 16px as far as I understand and "The rem unit is relative to the root—or the html—element."
https://snook.ca/archives/html_and_css/font-size-with-rem
In my responsive.scss I used some advice I found recently come to think of it, sorry I don't have the link but the comment in the code is explanatory:
#media only screen and (max-width:320px)
{
/* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */
html.touch.webkit,
html.touch.webkit body
{
font-size:22px;
.button
{
font-size:12.8px;
}
}
I hope this helps.
Trying to implement a style for a WebApp.
It seems that the CSS propery 'line-height' is different in the WebView.
I used this pen as example: http://codepen.io/bbredewold/pen/gGbht
The code is nothing special:
.flip {
position: relative;
width: 100px;
height: 100px;
}
.front {
width: 100%;
height: 100%;
font: 6em arial;
line-height: 100px;
text-align: center;
border: 2px solid #b4b4b4;
}
<div class="flip">
<div class="front">A</div>
</div>
Is this a bug? Or do I miss something?
Any ideas how to work around this? It's a headbreaker...
These are pictures with the differences. Picture 1 is problematic, picture 2 is nicely centered...
(I can't comment the original question, as my score is currently too low)
I realize this is a slightly old question but here goes:
I ran into something similar recently (Android 6, Chrome 55 etc) and I found that some of the Web Settings for WebView can make it interpret the page as if you had used the viewport metatag
<meta name="viewport" content="width=device-width, initial-scale=1">
In order to get the same result in Chrome I had to insert that viewport metatag.