Just a quick question, I have a URL, which has alternate URL for mobile, and alternate URL for just another version of a page.
Is it okay to put in meta (in MAIN PAGE) something like:
<link rel="alternate" media="only screen and (max-width: 640px)" href="VER1">
<link rel="alternate" media="only screen and (max-width: 640px)" href="VER2">
...and on that pages I put canonical, to the MAIN PAGE?
Tnx
Related
Trying to display my Web app Icon on the iPhone Home screen.
When creating a Shortcut from my Home Screen to my Flutter Web App, a screenshot of the app is displayed, not the Favicon.
By short cut I mean on your Iphone in Safari click share Icon > Add to Home-Screen > Add
In index.html I added
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
Created all images with https://www.favicon-generator.org/ (so they have the right size) and stored them at the root.
The Favicon works in Safari and Chrome and when creating a shortcut from Home screen to Web app on Android the Proper Logo is displayed. But not on IOS, what else do I need to configure.
It's also possible to somehow configure this icon, as you can see if you try adding https://flutter.dev/ to your home screen
I suppose you’re working on windows and as a result didn’t build the Web App in Xcode yet.
Had the same issue sometime ago and that fixed it.
Let me know if it worked.
Ive noticed with website favicons that have transparent backgrounds, when a shortcut is made on iOS and the favicon becomes the shortcut image, the background turns black. So if the favicon is a black logo on a transparent background, it looks a bit strange.
Does anyone know the reason this happens?
Thanks
This is a known behavior of iOS. Although this is not documented anywhere, this is probably to enforce iOS UI guidelines, where all home screen icons are squares with rounded corners.
Oh, and you are not the only one trying to use transparency on iOS. Check StackOverflow's Touch icon and add it to your home screen!
Note: I'm the author of the article mentioned above.
iOS doesn't allow home screen icons to have transparent backgrounds
The home screen icons doesn't support transparency. And why are you using favicon? You should use below in the head tag.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
As described in the answer: https://stackoverflow.com/a/21144916/468724
Want to include a conditional stylesheet for when the screen is a certain size, so
for example I have
<link rel="stylesheet" href="stylesheets/responsive.css.scss" media="screen and (max-width: 900px)">
in the head. However it's being called despite the screen size being greater than 900px.
Is my mark-up incorrect?
Thanks!
I am looking at using CSS Media Query to support multiple tablets (Android/iPad). Below is the Media Query which I have;
<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">
Now my assumption is most tablets are below 1024px width. Please correct me on this front. Any tabular comparision would be great.
Also any other approaches besides device-width for media query would be fine.
I am looking at a generic way of designing my pages which would work for both desktop/tablet browsers...present and future (and may be even mobile). I am using fluid design (or called responsive design) for the same (everything in %...width/height/padding/margin all in %)
Bear in mind that a device such as an iPad can be used in both portrait and landscape orientations, so I would use the following media query:
#media only screen and (min-device-width: 768px) and (max-device-width: 1280px) {
/* .touch class from Modernizr */
.touch .element {color: #fff;}
}
Or if you'd like to keep the styles in their own document:
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">
Note: You could generally detect tablets by combining media queries with a feature detection library like Modernizr.
When we make iPad specific website ( I'm making different website for desktop users) and we also want to write different CSS for Portrait and landscape mode, what method you would prefer?
First method
We can keep single CSS file with only one http request
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
and use media queries inside to keep the code separate
/* CSS for landscape here */
#wrapper {width:1024px}
/* CSS for portrait here */
#media only screen and (orientation:portrait){
#wrapper {width:768px}
}
Second method
We could use 2 CSS files with 2 http request
<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
Which method you would prefer and and if you have any suggestion to improve please tell.
Note: I'm making separate website for Tablets, it's not for Desktop and Mobile
Edit 2: *In first method is it better to specify Landscape too or it's not necessary.*
Compare this with first method code
/* CSS for landscape here */
#media only screen and (orientation:landscape){
#wrapper {width:1024}
}
/* CSS for portrait here */
#media only screen and (orientation:portrait){
#wrapper {width:768px}
}
and Is it ok to remove style="text/css" from css link?
<link href="style.css" rel="stylesheet" media="all" />
And should I keep media="all" in link or it's not necessary?
I would prefer the first one because the whole CSS gets cached on the first request. With the second one, the CSS for the other mode will need to be downloaded so the screen orientation change will not be as smooth as with the first one.
I prefer the first method myself because I like having everything in one place. As for the necessity of style="text/css", you don't need to have it, at least with the HTML5 doctype, but I think it remains as a best practice thing. The same goes for media="all".