I read a lot of articles about how build a web site for iphone, all people have more and less the same technique for optimization a website for iphone.
I follow the suggestions, I use the difference css file (iphone.css - i just need the optimization for iphone not all phone) and I tried with a IE conditional and without. I tried also a inline css, inside a common style.css. And finally i also add a meta tag with scalation...but nothing! The iPhone doesn't want read my rules.
I don't have a iPhone i use iPhoney program (I also tried something else but they aren't very good) and sometimes I check form friends iPhone.
My problem is that my main menu that is long like all the page break and going down over the content. Just this. I just need to tell that the screen is more little (min-width-divide) but it doesn't work! And the css doesn't work (i tried to put #menu: display:none and the menu was still there). But the directory is right because if i see the site form my laptop i can see the css and can go inside!
The web site is built in wp, i don't know if it's important but it's so simple web site.
Make sure you target the iPhone with something like this:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"
href="mobile.css">
<!--<![endif]-->
Related
Alright, so I set up a website using Github a while ago. I use it as a showcase for programming projects I'm working on, but that's beside the point. For a while now I've been trying to add an icon to my website, and for the life of me I can't figure out how. Help please.
If by icon you mean the image you see on the browser tab 32x32 pixels, that is usually in a format called Favicon.
You just need the image of your icon in favicon format (google how to convert an image to favicon and you will find websites that do this for you easily.), add it to your project and then add a tag on your hmtl head:
<head>
/* some style tags */
/* THE FOLLOWING IS YOUR 'ICON' */
<link rel="icon"
type="image/png"
href="./style/images/logo.favicon">
</head>
But this question should definitely not be under git tags. You did not mention why one should keep in mind that you are using github.
EDIT: This was a total rookie error on my part. I was editing a different fileset to the one I was testing. Sincere apologies to all who answered to help me out. I've upvoted all answers as I at least learned a little more on media queries from you all, but none provided the answer. Advice pls on what now to do with this ticket?
This is a busy topic on the site, but I haven't seen the solution for this problem.
The viewport tag is present. I'm using:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
When I resize the browser window in Chrome, it works fine, and I can see it snapping to new breakpoints as they are reached, however iPhone Safari displays the top left of the site only, with no sign of picking up any queries.
The CSS Media query I'm using for iPhone portrait is:
#media (max-width: 321px) { }
I'm using Bootstrap and LESS, so my media queries are at the end of the styles.
Sorry I'm not in a position to share code on this. It's an odd one — I'm hoping someone can see if there's something I may be missing.
EDIT
Here's a very basic example which is working on my iPhone. I can rotate from portrait to landscape and the bg color will change - so there's nothing wrong with the media query I'm using:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
body
{
background: blue;
}
#media (max-width: 321px)
{
body
{
background: red;
}
}
</style>
</head>
<body>
Here is my content...
</body>
Edit
What solved this for me is a double ("or"-operated) media query, for either max-device-width or max-width. It's like David Rönnqvist's first suggestion, but it was only putting max-width, max-device-width BOTH in the media query that worked for me.
#media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
BBTony, I hope this works for you.
I'm keeping the below because it is a fuller description of the problem than i've found anywhere else. I disliked my first solution (below the line) so much that I re-researched for the thousandth time - thanks to this post which gave me the above solution without the ridiculous !importants.
Edit: this also worked, but it's extremely inelegant: Putting "!important" on every line of the media query conditional CSS.
I was reluctant to propose that as an answer, but after going bonkers researching this for 3 days, it was the first thing that worked for me.
Full description of the problem: I had similar symptoms as BBTony. I had the viewport tag (and I had it above the stylesheets as recommended).
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
My media query, intended to catch any smallish device, was being ignored by an iPhone 3gs running iOS 5.1, but the same media query was being properly picked up by an iPhone 4s running iOS 6.
#media only screen and (max-device-width:640px) {
/* many styles here */
}
Very oddly, while most declarations within the media query were being ignored by the older iPhone, some of them were being respected. The newer iPhone 4s however respected all the CSS within the media query, as expected. On Safari desktop, the media queries all worked perfectly, snapping at both the breakpoints (there are 2).
I linted my CSS through several different linters, after reading here that CSS errors can cause mobile browsers to ignore media queries. After making certain that my CSS was compliant, and just for the hell of it, I put !important declarations after each and every line of CSS within the media query - like 80-100 !importants.
Presto.
I can't tell you how mad it made me that this even worked, and I'm curious why the old iphone would only respect the conditional with !important in this case.
I've previously used this for my site and it worked as iPhone specific media queries for me
#media only screen
and (max-device-width: 480px)
and (orientation:landscape) {
/* iPhone landscape */
}
#media only screen
and (max-device-width: 480px)
and (orientation:portrait) {
/* iPhone portrait */
}
Answers to other questions like this seem to suggest that 480px for the max-device-width is what you should go for in your media query.
Our team uses Trac heavily for project management, and I need to view the Trac site from time to time. Yet, it's really inconvenient to view the Trac site from the mobile device (it's an iphone in my case).
I wonder if there is any existing hack / plugin / template / css suite that could help display Trac better on the mobile devices? I thought some <meta> tags and css positioning should make the trick, yet I could not google out much from this.
any help is appreciated.
thx a lot!
Consider reading TracInterfaceCustomization in Trac's wiki for a start, more specifically about using style.css as I agree that you'll certainly need to change site-wide styles.
Ready-made themes are available at trac-hacks.org. Maybe you'll find something suiting your need at least a bit better than Trac default for a quicker start.
And finally the ThemeEnginePlugin seems like a great tool to put your ideas into reality quickly, although I've never tested this on my own by now. Good luck.
Ok, it took me a while to work out this. This is not perfect, neither good, but at least it looks a little better for me.
here is what I have done:
in the folder of [trac root]/templates/, add or edit the site.html, which contains the following:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/" py:strip="">
<head py:match="head" py:attrs="select('#*')">
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
${select('*|comment()|text()')}
<link media="handheld, screen and (max-device-width: 480px)" href="/htdocs-trac/css/trac-mobile.css" type="text/css" rel="stylesheet" />
</head>
<!--! Custom match templates go here -->
</html>
the above would add a new CSS link of /htdocs-trac/css/trac-mobile.css for every Trac page, and then u could put the mobile-device-only styles inside the css file, in my case, the css file contains:
.nav li {
white-space: normal;
}
#mainnav *:link, #mainnav *:visited {
padding: 0 10px;
}
#mainnav *:link, #mainnav *:visited {
padding: 0 0px;
}
#header h1 {
margin: 0;
}
honestly, it ONLY makes the title bar appeared better, and the button not collided. But a lot of places use table based layout, and (seems) could not be solved by css easily.
Hope it helps for others.
I have created a webapp using all of the recommended link and meta tags for safari, eg.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="/startup.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />
However, my issue is if the startup.png or any of the apple-touch-icon image files are updated on the webserver, it doesn't seem like a user's iphone or ipod will retreive the updated file once it has been saved to their home screen (I'm guessing it's cached somehow or something). It works to remove the webapp from the home screen and re-add it. But is there a way to let the application know it needs to refresh these images without requiring the user to delete and re-add it?
It's been a few years since this question was asked/answered and I'm here to report that this is now possible!
In newer iterations of iOS, the Apple Touch Icon that is displayed on the homescreen is cached just like any other piece of content from the website. By simply changing the name of the image, it will force the homescreen shortcut to refresh the icon the next time the shortcut is launched.
However, to keep in line with Apple's naming conventions, you can simply append URL variables to the reference whenever you want the icon to be redownloaded and continue to call the image apple-touch-icon.png.
What I have done to automate this issue (in PHP) is append the last modified date/time to the image. For example:
<link rel="apple-touch-icon" href="apple-touch-icon.png?m=<?php echo filemtime('apple-touch-icon.png'); ?>" />
This outputs:
<link rel="apple-touch-icon" href="apple-touch-icon.png?m=1415832495" />
Now, you don't have to do anything but literally overwrite the image and everything else will happen automatically. When you change the image, the modified time changes and doesn't match what the user has in cache anymore, so it forces a new download. Simple!
OLD ANSWER: I've done a ton of research into this trying to find a way. Unfortunately, it is not possible. It needs to be removed and re-added to the home screen for the new icon to be used.
I just tested a theory on the Iphone 5 and Ipad 2, and it worked for both. Similar to the favicon, you can force the new favicon to pull by changing the href.
Instead of href="/apple-touch-icon.png" I used href="/apple-touch-icon.png?ver=1.1" and it pulled the new icon when the site was visited (without deleting and re-adding to home screen).
will just add my small "work around". Have been tryied all kind of corrections to my website to get the icon to show up correctly in my bookmarks on my own IPAD. Later found out that on apple products there newer visited my site before, ICON showed up fine. All my visits to my site was as http://mysitename(ref).dk but when I added http://www.mysitename(ref).dk the IPAD finally discovered this as a new website and the apple ICON was located and presented correctly in my bookmarks. :-)
Jacob
I've seen icons get updated, but I don't think it's possible to affect this update in any way. I've noticed the updated icons after the phone was rebooted, but I haven't look enough into it to say anything conclusive.
Within my webapp if i just change the startup.png file with a new one, the first time a reload the app from the home screen it shows the old image. Closing and reopening the app shows the new startup.png image. iOS 4.2.1.
By the way, the same apllies for the icon.
Removing and re-adding the webpage/webapp to the homescreen may not even suffice.
I just tried to
delete the bookmark from homescreen
reload the page in safari
add the bookmark to homescreen
==> it still shows the old icon it seems to have cached somewhere :(
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide