How to make the text in a web bigger on phone? - html

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.

Related

Mobile website viewport exact width issue

I've a website that I'm building which is 700px width on desktops and mobile. On the desktop the 700px div is centred. On mobile the 700px div just needs to fill the screen.
Test code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=700" />
<style>
div#wrapper
{
width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="/test.jpg" alt="Test image 700px width in 100px strips" />
</div>
</body>
</html>
This works fine across desktop browsers and most mobile phones. However on my daughters cheapo smartphone the browser zooms right in and only displays about 350px.
How should I approach this issue. You would think that it would be an easy situation to resolve but it's proving not too be! Messing about with the other meta tag attributes (initial zoom etc) has no effect on this particular smartphone.
The Huawei phones browser is Agent: Modzilla/5.0(Linux; U; Andriod 4.2.2;en-gb;HUAWEI Y330-U01 Build/HuaweiY330-U01)AppleWebKit/534.30(KHTML, likeGecko)Version/4.0 Mobile Safari/534.30
Use this
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Explanation:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Demo
Without view port
With view port
Read this - https://css-tricks.com/snippets/html/responsive-meta-tag/ and this http://www.w3schools.com/css/css_rwd_viewport.asp
I don't have an Android device to verify this, but perhaps this would be solved with a relative width and a maximum width:
<style type="text/css">
div#wrapper
{
width:100%;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
max-width overrides width when its conditions are met, so a smaller display like that on your daughter's phone should use a full width while a larger display would only be 700 pixels wide.
(I added the type attribute to your <style> tag for completeness. Your code should render just fine without it.)
Try this, hope it will solve your problem
<meta name="viewport" content="width=device-width"/>
instead of
<meta name="viewport" content="width=700" />
I would set your CSS width to 100%, not 700px. It's generally best to avoid hardcoding dimensions when possible. Also as suggested by another answer, max-width could be useful as it overrides width when specified.
You could then use screen size media queries(https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) to put a border div around the image on large displays.
Add the below link inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Style Sheet
<style type="text/css">
#media only screen and (max-width: 699px)//media query for the resolution below 700px {
div#wrapper
{
width:100%;// this will took full width
}
}
</style>

How can I make an html page automatically fit mobile device screens?

I am putting a Formidable Form on an html page by using an <iframe>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
</style>
</head>
<body>
<div id="header">
<h2>Book Supheroes Unite</h2>
</div>
<div id="form">
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div>
</html>
I believe it has something to do with viewports? However, I'm not entirely sure on this!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag allows you to target mobile devices and sets the width to the screen size.
Documentation provided here!
Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap
Personally I would use a library like bootstrap to acheive this adding something like this to your head.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap allows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
You can use the media queries !
looks like this:
#media (max-width: 640px) {
//your css to make it full screen
}

How to set scaling for equivalent looking heights on iPhone and iPad

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.

iPad zoom to fit doesn't work on webpage with minimal content

Consider the following rudimentary html code block:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iPad test</title>
<meta name="viewport" content="width=device-width">
<style>
body
{
margin:0;
}
#content
{
margin: 0 auto;
width: 980px;
border:1px solid #c4c4c4;
background-color:#f5f5f5;
}
</style>
</head>
<body>
<div id="content">
A small amount of content
</div>
</body>
</html>
When viewed on an iPad, the main content area of 980px will not be auto zoomed to fit the iPad screen. However, if you replace A small amount of content with a large amount of content, ie... enough to cause vertical scrolling, the page is auto zoomed on the iPad.
Does anyone know why this is? I have been searching high and low and can't seem to find a way to force the auto zooming to occur when there is minimal content on the page.
Changing the viewport content to width=980 fixes the issue of course, however I am creating a responsive website, therefore the viewport needs to be device-width.
I am using a media query to alter the CSS for the content area on smart phones (to 100% width), and I was hoping to use the standard desktop version of the website for iPads.
Any ideas would be much appreciated.
Note: I am testing on an iPad with retina display, I'm not sure what happens on older models.
After a break from this, I came back with a different angle - if setting the viewport width to a specific value fixes my issue for the iPad, why not do just that.
So the solution for me was to default the viewport width to device-width to handle smart phone devices, then detect for iPads and adjust the viewport width:
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
if(navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
</script>
Thanks for your suggestions insertusernamehere
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The whole content will fit afterwards.

Optimizing a Site for Blackberry Curve (Maintaining same in iOS/Android)

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