PDA

View Full Version : Mobile browser page - help

Xander
08-15-2011, 11:04 PM
I'm making up a landing page for when someone scans my QR code. I have an iphone and ipad to test with but they're not showing the page in nice, easy-to-read lettering.

For those that want to see it on their own phone, this is the page (http://promptcare.ca/qr.html).
http://gyazo.com/e62382b247514e3d89d38d22417ad7e6.png

Most of the code in here I've gleaned from several sites but the end result still isn't pretty.
http://gyazo.com/999ec65310262200c06577617cfe32ef.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1" />>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prompt Care</title>
<style type="text/css" media="screen">

body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}

body p{
font: 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 0px;
}


@media only screen and (max-device-width: 480px) {
ul {
max-width:480px;
}
}
@media only screen and (max-device-width: 240px) {
ul {
max-width:240px;
}
}

.large {
font-size: large;
}
</style>
</head>

<body>
<h1><font color=#116611>Prompt Care</font></h1>
<span class="large">Thanks for scanning! You can ask for
10% off your first repair*</span><br />

<h2><strong><font color=#116611><u>Niagara's Smallest PC Shop
with the Biggest Service!</u></font></strong><br />
</h2>
<p>Email: <a href="mailto:Tech@PromptCare.ca">Tech@PromptCare.ca</a></p>
<p>Phone:<strong> (289) 213-2208</strong></p>
<p>Website: <a href="http://www.PromptCare.ca">PromptCare.ca</a></p>
<p>
<img src="tw-25px.png" width="25" height="25" alt="twitter" /> <a href="http://twitter.com/prompt_care" target="_blank">@Prompt_Care</a><br />
<img src="fb-25px.png" width="25" height="25" alt="facebook" /> <a href="http://facebook.com/promptcare" target="_blank">Like us on Facebook!</a><br />
<img src="vcard.png" width="25" height="25" alt="vcard" /> Download VCard
</p>
<h3>Serving the Niagara region
since <br />
2001. On-site, in-shop, or via the <br />
web -- Prompt Care will get the <br />
job done.</h3>

<p>* Labour only. Valid for one computer per housecall. </p>
</body>
</html>
Suggestions on formatting, etc. are also welcome.

Edit: I'd like to keep any CSS within the page, for simplicity.
Vicenarian
08-15-2011, 11:12 PM
Just a random suggestion, I did this exact thing last month (QR code leading to a coupon page), and I made my coupon into a jpeg using Paint.NET (free). Then, I embedded that jpeg coupon into a webpage. Really easy, and easier for people to print as well. Just a thought.


Edit: Also, a PDF export of the coupon might be another idea?

Regarding formatting/HTML/CSS, it's all latin to me hahaha.
Xander
08-15-2011, 11:25 PM
Not a bad idea; might be a good fall-back plan. Thanks.

I'd like to see if I can get this working, though. I'd learn a little more about CSS/etc and it should be versatile enough to show on the ipad, too.
SmithFamilyDesigns
08-16-2011, 12:24 AM
From what I see, you're only specifying that a "ul" element should be 480px or 240px, but your content isn't wrapped in a ul. Perhaps try changing the CSS to


<style type="text/css" media="screen">

body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}

body p{
font: 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 0px;
}


@media only screen and (max-device-width: 480px) {
body {
max-width:480px;
}
}
@media only screen and (max-device-width: 240px) {
body {
max-width:240px;
}
}

.large {
font-size: large;
}
</style>
Xander
08-16-2011, 05:59 AM
The <ul> was a leftover from the page I'd gleaned it from where a fellow was trying to get his ToDo list to show up right. Changing that does format it better on the iphone, at least in terms of width of the frame... however, it centers it on a wider page so it starts off showing just the left half of it.
http://gyazo.com/ff80fa2889946361b2808763333ec5aa.png
It does show up just fine on the iPad but that was less of a concern.

/added some colour to it. Prettied up the info with a table
sassenach
08-16-2011, 12:46 PM
What is the "@media only screen and" meant to be? Have a look at this page from w3schools for the recommended syntax. http://www.w3schools.com/css/css_mediatypes.asp
Xander
08-16-2011, 05:00 PM
From what I've gathered, the "and" is Boolean to make sure that both conditions are met. The use of a comma would be an "or".

@media screen,print <-- screen OR print
@media screen and (min-width: 800px) and (max-width: 1200px) { <--screen AND specific dimensions

(The greyed out section, I can find 74K results on that exact phrase so I'm giving it credit that it's legit)
I found some info here (http://www.danstorm.com/dan-storm-article-css-15.html); much of which is over my head, web-wise.


Actually, I changed 'screen' to 'handheld' and that helped some. Fits it to the width of the screen and looks adequate in landscape but I'm aiming for portrait viewing.

Google found me http://www.iphonetester.com/ which displays the page pretty much like I want but that is definitely not what's coming up on my iphone.
Elemdee
08-16-2011, 07:37 PM
Are you trying to set it up as a landscape view or vertical or both? Using my android phone I scanned the QR code and the information completely fills in the screen as I think its supposed to when held in landscape view. When I turn it vertical it fills in the top 40% portion of the screen only, leaving the rest below the dotted line blank. Can't take screenshots for you because my phone isn't rooted and I've not really got the time today to do it the long way. =/
Xander
08-16-2011, 08:58 PM
I figure most people would be holding their phone upright (portrait), I'm preferring it look 'perfect' that way but, of course, not look like total crap when in landscape.