I've created a mobile version of a website - simple Table HTML and scarce CSS. Renders great in iOS and Android, I've even used a Meta Width Set to take the width across devices. So, it even renders great in Black Berry width wise-
But, I came across a huge problem - The site, for some odd reason on Blackberry - requires a Zoom (Though not needed) before being able to access a link or read the text. I understand Blackberry res is about 480px - and iOS 900 something, right? Any suggestions on keeping the width to take across iOS, Android, and Blackberry - while not forcing the user to Zoom (With that Magnifying Zoom Icon) on Blackberry? Is this a Javascript thing, a (Hopefully not) PHP/Server side thing?
Ultimately, how do I create a Mobile version of a site - that maintains rendering well in iOS, Android, but also in BB without making the user 'Zoom > Click > Content' but just to browse it normally, 'Click > Content'. But also doesn't require me reducing the size it'll display in iOS/Android?
The way this website is setup is the ultimate goal; http://lisaunger.mobi/ It renders everywhere and exactly like I'm trying to render mine - not sure how, though.
Please throw me any suggestions as I'll be testing them all tomorrow.
Blackberry is: Curve 8520 v4.6.1.259 2009
Here's the code I have at the moment:
Markup:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="all" href="mobilesub.css" />
</head>
<body>
<div style="width: 480px;margin: auto;">
<div>
<img src="img/logo.png" border="0"/>
<br />
</div>
<div>
<img src="mobile buttons/books_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/news_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/app_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/about_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/videos_off.png" border=0 />
</div>
<div>
About
<br />
The New York Times bestseller
Contact
</div>
<div>
</div>
</div>
</body>
<script type="text/javascript" src="http://m.link.me/tracker.js"></script>
</html>
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
CSS
body {
padding: 0px;
margin: 0px;
background-color:#000;
width: 100%;
text-align: center;
color: #fff;
}
.center-display {
margin-left: auto;
margin-right: auto;
}
#content {
}
#h6 {
font-size: 26px;
}
div {
margin: 0px;
padding: 0px;
}
Update: Setting the site to 320px in width, and adding the meta-initial scale allows the zoom to go away and renders the way it should in Blackberry - but ends up taking a way from iOS and Android a little - as now the site zooms passed the browser width in those devices causing a little bit of a horizontal scroll - so close!
Have you tried to define the website by devices - so if i will go on the web with my bb it will be smaller in that case so the user wont need to do zoom
this might help
Related
I'm writing a web app for a an iPad and I want to overlay an element over an iframe, everything seemingly works fine with nearly all devices.
I have the ability to interact with the link or text that's overlayed and have the ability to touch and use the iframe beneath,
but if I change the device to an iPad on chrome dev tools or other browsers the iframe ceases functionality while the overlayed elements continues to work.
I have simplified it down to this code and the issue still remains:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.myWrapperClass {
position: absolute;
z-index: 99 !important;
top: 0;
right: 0;
}
iframe {
position: relative;
margin: auto;
}
</style>
<div class="myWrapperClass" id="content">
<div class="myClass">
Some Stuff Here
</div>
</div>
<iframe frameborder="0" src="https://example.com" id="myIframe" width="100%" height="800px">
no show
</iframe>
</body>
</html>
I have tried a lot of things like not using absolute positioning and using negative margins and fixed positions, pointer-events, z-indexing and others but to no avail. The issue still remains on iPads.
this is the site
http://www.touziwangzhan.com/en/gpu2.html
i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code?
this is the site
http://www.touziwangzhan.com/en/gpu2.html
i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code?
if i higher the initial-scale , sometimes the image will beyond the phone screen
here is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="CPU benchmark">
<meta name="description" conten="CPU benchmark">
<meta name="viewport" content="width=device-width, initial-scale=0.46">
<title>GPU Benchmark, GPU Comparison, GPU Chart - Shenglong</title>
<style>
a{
text-decoration:none;}
#s1{
max-width: 100%;
display: block; }
#s2{
font-size:36px;
text-align:center;
margin-top:1.2% ; }
#s3{
text-align:right;
margin-right: 4%;
margin-top:6.03%;
font-size:20px;
color:black;
line-height:160%; }
</style>
</head>
<body>
<img id="s1" src="/b1.png" height="90" width="1519"
style='position:absolute;left:0px;top:0px;right:0px;z-index:-1'>
<p id="s2" style="color:white">Video Card Photo Chart</p>
<div style="text-align:right;margin-right: 0.8%;margin-top:-5.9%;">
1</div>
<div id="s3" >
CPU Benchmark
Video Card Benchmark
CPU Photo Chart
Video Card Photo Chart
</div>
<p style="text-align:center"></p><br>
<br><br>
<div align="center"><img style="margin-left:0px;margin-top:16px;" src="gpu.jpg">
</div>
<div style="text-align:right;">
n</div>
<br><br>
<div style="text-align:center">GPU Benchmark, GPU Compare, GPU Comparison, Shenglong</div>
<br>
<div style="text-align:center">1014</div>
</body>
</html>
Use media query in CSS to make your text bigger: see here
To check the mobile for example you can use:
#media only screen and (pointer: coarse){
#s3{
font-size: 30px;
}
}
You correctly added the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=0.46">
To make the content even larger set the initial-scale value to 1.
The initial-scale property controls the zoom level when the page is first loaded.
MDN Web Docs | Using the viewport meta tag to control layout on mobile browsers
The size of everything should now be readable and similar to larger screens.
How do I force Firefox (or any other browser) to scale text and images to fit the resolutions of the display?
<meta name="viewport" content="initial-scale=1; target-density=device-dpi; user-scalable=no; shrink-to-fit=yes">
does nothing, sadly.
<!DOCTYPE html>
<html style="height: 100%; width: 95%">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1; target-density=device-dpi; user-scalable=no; shrink-to-fit=yes">
<link href="bootstrap.css" rel="stylesheet">
</head>
<body style="height: 100%; width: 95%; padding: 0.313em; word-wrap: break-word">
<div class="container">
<div class="row">
<div class="col-xs-7 col-md-5" style="height: 40em; min-width: 25em; border-top: solid; border-bottom: solid; border-color: black; margin:1.250em">
<h3 align="center"> Statistics </h3>
<table class="table" style="width:100%">
<thead style="text-align: left">
<tr>
<td style="border:none"><td>
</tr>
<!-- Repeat a dozen times -->
</thead>
</table>
<div>
<div class="col-xs-7 col-md-5" style="height: 40em; border-top: solid; border-bottom: solid; border-color: black; margin:1.250em">
<img src="diagramm.png"></img>
</div>
</div>
</div>
</body>
</html>
I'm going to take a shot in the dark and say your viewport meta is not one you should be using. Do this instead
<meta name=viewport content='width=device-width, initial-scale=1'>
There is nothing wrong with targeting device dpi and shrink to fit but you have to be very aware of what you are trying to accomplish and what will happen. The meta I show is general purpose that works everywhere.
Rob's answer is correct; I wanted to go into a bit more detail, as this took longer than it should to look up and I want to save future readers the time.
There are two main issues with your <meta> element:
The list of valid content attribute values for name="viewport" are:
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable
Your content has non-standard values, shown in bold:
initial-scale=1;target-density=device-dpi;user-scalable=no;shrink-to-fit=yes
target-density=device-dpi had a very limited implementation when it was in use; I believe only WebKit supported it. WebKit also deprecated it and removed support back in 2012. You should not use target-density=device-dpi in your code anymore; use the standard width=device-width, instead.
shrink-to-fit=yes was added to Safari WebKit by Apple for mobile devices in iOS9. It is a non-standard property and never worked on devices other than those running iOS9+ and Safari Mobile. It will likely just be ignored by standards-compliant browsers, so don't feel obligated to remove it if you really want that for iOS devices running Safari Mobile.
You are using semi-colon delimiters in your content attribute. This is non-standard; only some UAs support this (I believe Safari is the only one currently). You should use commas to delimit your attribute values instead. Frustratingly, this is not mentioned in the HTML W3 spec, but rather in the CSS spec, CSS Device Adapt:
Authors should be using comma in order to ensure content works as expected in all UAs
I am not sure why the spec authors felt it was appropriate to define HTML data and requirements in a CSS document, but there you have it:
Some time ago I have made a test webapp on my iPhone 5. I used a 0.5 scale so that the UI looks sharper on the retina screen (border, etc.). This worked nice.
But now on my new iPhone 6 I see a very strange behaviour when rotating the device: on each rotate the page gets smaller and smaller until the app shows only a few pixels and is closed by iOS!
The webapp is still working normally on the iPhone 5, and on an iPhone 4. Also no problems when viewing as normal website in the browser. It's only on the iPhone 6 when opening as webapp from the home screen. I don't know anyone with a iPhone 6+ so did not test that.
I've minimized some test-code with scale 0.75 for anyone who wants to test:
<!DOCTYPE html >
<html>
<head>
<meta name="viewport" content="width=500px, user-scalable=no, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
* { font-size: 20px; }
div { float:left; clear: both; background: #ddd; border: 1px solid #333; }
</style>
</head>
<body>
<br/>
<div style='width: 100px'>100px</div>
<div style='width: 200px'>200px</div>
<div style='width: 300px'>300px</div>
<div style='width: 400px'>400px</div>
</body></html>
I've tried anything I could think of in the viewport tag. Also tested on another iPhone 6, and with & without zoom mode.
Questions
Is this a bug from Apple or not?
Is there a workaround for this?
I've got some simple HTML/CSS that I want to roughly fill the browser window height-wise on a portrait-oriented iPhone and iPad. The code I've developed works great on the iPhone, filling it nicely. However, on the iPad it takes up maybe half of the screen. I've tried all kinds of scaling, width, height, etc. settings on the meta viewport tag, but can't find something that works for both.
Is it possible to set it to work on both equally well? I also want it to work well on Android if possible.
Here's the code I'm using:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=0, target-densitydpi=medium-dpi, maximum-scale=1.0"/>
<style>
.box {
border:0px solid ddd;
text-align:center;
font-size:750%;
font-family:Helvetica;
font-weight:bold;
margin:0 auto;
padding-bottom:10px;
}
.gaptop {
margin-top:10px;
}
</style>
</head>
<body>
<div class="box">+</div>
<div class="box">–</div>
<div class="box gaptop">3</div>
</body>
</html>
See the links below.
1) Designing content for the whole iOS family and
2) Safari Web Content Guide
Hope this may help you.