i have the following css calls:
<link rel="stylesheet" href="htlibery/desk_coupon_style.css" type="text/css"/>
<link media="only screen and (max-device-width: 480px)" href="htlibery/mobile_coupon_style.css" type= "text/css" rel="stylesheet">
When viewing on iphone this serves the correct style sheet.
When on my samsung android (captivate) it serves the desktop version)
If i hit refresh the correct style sheet is then served.
any ideas...
If no ideas, what is the best method to auto refresh on page load?
Thanks
So Far I have found this (From paste bin) to work best..
<!-- Mobile device detection by Bushido Designs: BushidoDesigns.net -->
<link rel="stylesheet" type="text/css" href="mobile.css" />
see note: <style type="text/css" media="screen and (min-width: 481px)"
<!--
#import url("screen.css");
-->
</style>
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
I will update after further testing..
Related
I have been struggling to get favicon to work. Finally, I got it to work by using a Base64 version per the answer to this previous question: local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
Now, I want to save the bookmark to my phone's home screen, but the icon the phone uses is not favicon. Instead, it is just a black box with a letter "S" (being the first letter of my app's title). I'm sure this is by default.
I have seen the favicon generators where all sorts of icons are generated for all sorts of devices, like this generator: https://www.favicon-generator.org/
The generators create a lot of files. The Base64 string is very long. To repeat all this for every icon file for every device would result in a big, ugly html header.
Is there a short-form way to get this to work? The first <link> is for my favicon.ico. If I am on the right track, I need to deal with all the rest of the commented <links> below.
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAA
AAAAAABxbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/
cWxo/3FsaP9xbGj/ODIr/zgyK/84Miv/ODIr/zgyK/84Miv/ODIr/zgyLP84Miz/ODIr/zgyK/84
Miv/ODIr/zgyK/84Miv/ODIr/0I8Nv9CPDb/Qjw2/0I8Nv9CPDb/QTs3/0E7OP9BOzf/QTs4/0E7
Of9CPDb/Qjw2/0I8Nv9CPDb/Qjw2/0I8Nv9AOjT/QDo0/0A6NP9AOjT/QDo1/0I7L/9DPSr/Qjws
/0M9Kv9FPib/QTsy/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/Pzk2/0I8Lv85M0v/
Kyd1/xMRw/8SEMf/IyCP/z04PP9BOzL/QDo1/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo1/0I8L/88
NkL/DgzT/xEPyv8AAP//AAD+/wIC+f8gHZj/Qjsv/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0E6
Mv8/OTj/Hxyd/xUTvf8IB+b/Cgne/xcVtf8VE73/BAPz/yIflP9EPib/Pzk3/0A6NP9AOjT/QDo0
/0A6Nf9CPC3/NjFT/x0aov8cGqX/EhDG/xEPy/8CAfr/AAD+/wAA//8MC9n/QTsy/0A6NP9AOjT/
QDo0/0A6NP8/OTb/Qz0q/zAsZv8YFbP/JCGM/woJ4f8EA/P/BQTx/wYG6/8JCOT/GBaz/z85Nv9A
OjP/QDo0/0A6NP9AOjT/QDo1/0E7Mf88NkH/FBK//yQhi/8YFrL/EA7N/xMRwv8UEr//DQzV/xgW
sv9CPCz/QDo2/0A6NP9AOjT/QDo0/0A6NP8/OTf/RD4m/x4bn/8RD8j/FhS5/wkI4v8AAP//AAD+
/wAA//8tKXH/Qz0p/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6M/8/OTb/KSV7/wQD8/8ODdP/
ExHE/xQSwP8qJnr/Qz0q/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjX/QDoz/0M9Kv82
MVT/JiKH/y0ocf9AOjT/RD4o/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6
Nf8/OTb/Qjwt/0U+JP9EPSj/QDo0/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0
/0A6NP9AOjT/QDo0/0A6Nv8/OTf/Pzk3/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/
QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9A
OjT/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAA==" rel="icon" type="image/x-icon" />
<!-- <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="www.basketball.superdocs.com/favicon.ico" type="image/x-icon"> -->
this source claims that you don't need that many lines. 5 lines is enough. but since your favicon is 16x16 and resizing for bigger is unnecessary you can even skip some of those. it depends on the original image size, and what platforms you want to support, but you can even go down to 1 line. (you can ditch favicon.ico if you don't plan to support IE10- and use only png.)
in most cases 4-bit image depth is enough. that means 16 colors, which is more than plenty for your icon example, but works with most logos even in high resolutions. png supports 4-bit, and it saves a ton of space, even though it is lossless. it is smaller then 24-bit jpg or gif files, and has better quality. if 4-bit is not enough 8-bit is still a viable option and no icon needs more. your image was 1150 Bytes, and the 4-bit png version is 202 Bytes (you can use IrfanView to decrease color depth and save as png).
if you can use javascript and you need multiple declarations, you can have js build the html in the browser. you can even use unicode text instead of base64 and convert it with js, or build your icon dynamically (the example below doesn't use js).
i'm not an android expert, but for the example to work this much must be enough:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
to prevent horizontal scrolling in my web pages, I have used 3 different stylesheets for mobile, tablet, and desktop devices. I try to tell the browser to use the proper css file with the following tags in the head of the html file:
<link href="static/css/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="static/css/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)" />
<link href="static/css/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />
by doing so, I expect the mobile browsers to use cssS.css. but when I checked the website in a Samsung mobile phone, It appears to be using cssL.css and shrinks webpage to prevent horizontal scroll bar. this way, texts are very small and unreadable.
is there anything wrong with the approach?
What am I missing?
thank you very much.
Try the below meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
Chrome on Android has an accessibility setting that allows users to zoom in and out even if the page requests that it not be zoomable. So you may have the user-scalable setting set as you want but the browser is ignoring you. Some accessibility proponents will argue that you should never disable zooming. http://adrianroselli.com/2015/10/dont-disable-zoom.html
I have 3 different stylesheets, one for pc screens, one for smartphones like iPhone5S, Samsung Galaxy S4...and another for smaller smartphones, such as my Samsung Galaxy mini.
This is how I wrote my links in my html file:
<link media="handheld, only screen and (max-width: 300px), only screen and (max-device-width: 300px)" href="StylesheeetSmallSphone.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (min-width:301px) and (max-width: 480px), only screen and (min-device-width:301px) and (max-device-width: 480px)" href="StylesheetLargeSPhone.css" type="text/css" rel="stylesheet" />
<link media="Screen" rel="stylesheet" type="text/css" href="StylesheetPC.css" />
On every device, the css applied is the last one. What do I have to change so that every device displays its own css?
Try it..
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
Do you mean EXCLUSIVELY the last one or ALSO the last one?
I have this in my index.html file :
<!-- WEB SEARCH META TAGS -->
<meta charset="utf-8">
<meta name="robots" content="index,follow" />
<meta name="keywords" content="surfboards,surfboard,shaper,surfing,app,boards,board" />
<meta name="description" content="" />
<meta name="author" content="BoardLine Cie">
<link rel="shortcut icon" href="images/apple-touch-icon-57x57-precomposed.png" />
<!-- SAFARI WEB APP META TAGS -->
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="apple-mobile-web-app-title" content="BoardLine">
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- CSS-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- iPhone + Android -->
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image320x460.png">
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-57x57-precomposed.png" />
<!-- iPhone (Retina) -->
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x920.png">
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x1096.png">
<!-- iPad -->
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image748x1024.png">
<!-- iPad (Retina) -->
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
<link href="img/splash/ios/splash1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="img/splash/ios/splash1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
The files are in the root folder, whose access is restricted by a .htaccess (for testing purposes).
All png fils have the pixel dimensions indicated in the file name.
But android (4.1.2 in my case) keeps using a standard icon for the home-screen shortcut (an orange picture)...
Doesn't work on iphone4 neither.
Can you help me figure out what is wrong ?
thanks
Google seems to no longer support the apple-touch-icon syntax.
rel="apple-touch-icon" is deprecated in favor of rel="shortcut icon" but still supported as of Chrome 33.
In your example you have both, so it should work. However, it looks like the stock browser on some Android devices is not capable of using custom icon on home screen.
I experience the same on a Samsung Galaxy Note 3 with Android 4.3.
Chrome will use the custom icon, but the stock browser will only use that orange generic icon.
User Agent for Chrome on my Samsung Galaxy Note 3 is:
"Mozilla/5.0 (Linux; Android 4.3; SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.136 Mobile Safari/537.36"
User Agent for the stock browser is:
"Mozilla/5.0 (Linux; Android 4.3; nb-no; SAMSUNG SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36"
which looks to be a Samsung packaged older version of Chrome (v28)? If Chrome didn't support custom home screen icon before v31 that could probably explain why it doesn't work.
I have a website with a mobile version and I am trying to get it so that when someone chooses to Bookmark the website or 'Add to home screen' it will save an Icon to the home screen. I have an Android Samsung Galaxy S3 and no matter what I try I cannot get it to use the icon instead of the standard ribbon with tiny preview in the middle.
Currently..The below code will get it to display the standard ribbon with tiny preview of favicon image but will not display the entire icon:
<link rel="icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon"/>
I have also tried this code as well which only yields the standard ribbon icon when I add the bookmark to my homescreen. Not even a tiny preview like above:
<link rel="apple-touch-icon" href="http://www.mydomain.com/customicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="http://www.mydomain.com/customicon.ico"/>
Note: I have also tried 1) Placing the icon files in the root. 2) Naming the filename to apple-touch-icon-precomposed.ico. 3) Icon is 57x57 and under 40 kb.
I know there is some way to accomplish this because I tested a couple of websites like AOL, and eBay and both save to my home screen with a normal sized icon that appears like an app.
If anyone has run into the same problem and found a solution that works please let me know. I am stumped!
The entire issue was because the website was .htaccess password protected for testing purposes during design and development. All I had to do was move the folder that contained all icons outside of the password protected directory!
The following code is what I used and is now working:
<link rel="apple-touch-icon" sizes="144x144" href="http://m.mydomain.com/touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://m.mydomain.com/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://m.mydomain.com/touch-icon-ipad.png" />
<link rel="apple-touch-icon" href="http://m.mydomain.com/touch-icon-iphone.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />