I am trying to use some CSS that is exclusively for phones. I have tried to do something like this and seen similar suggestions elsewhere.
#media only screen and (max-device-width: 1136px)
The problem is newer phones (ie iPhone 5) have a resolution greater than not so old tablets (ie, iPad 2). Is there any better way to handle this? I don't want to include the resolution of every known phone as a check. Is a user agent check better?
There's no correct answer for this but you could use some standard queries.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
User agent also can do this, and you can use PHP to do it
Check this out: Check if PHP-page is accessed from an iOS device
Related
I use HTML coding in email marketing.
Nowadays It is important to nice represent email offers both in standard and mobile version.
So, exist the certain tricks which help you to made your emails looks nice on mobile devices (without bugs and gaps).
For example, the most famous trouble is the tearing of content of email letter due to changing of text size by mobile device.
To ban this feature of device I use next css-trick:
#media only screen and (max-width: 480px) {
body {
-webkit-text-size-adjust:none;
}
This trick works fine if I check my email in mobile device browser.
But it is not work if I check it in standart app for viewing emails.
For example here are the screenshots made from Android Tablet PC in standart "E-mail" app (version 4.1):
You can see, that the content is torn because of the incorrect text size.
How to avoid it?
Firstly, using media queries is not 100% supported in all email clients (Gmail for example). Fortunately, this doesn't need to be in a media query.
A webkit specific declaration will only work in webkit based clients (mac for example). See the htmlboilerplate (line 35), you could also add the ms prefix:
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;
I doubt this will address your Android tablet however. This may be something unavoidable, unless adding !important to your font-size can do the trick.
This question is based on What do I need to know to make my website work on mobile browsers? which was posted in 2009 with some old websites and specific Microsoft stuff
I make web-apps mostly in Django and it doesn't seem to work very well in Android/Iphone/other mobile devices.
There are some apps like django-mobile (https://github.com/gregmuellegger/django-mobile) that offers you the possiblity of making different sites depending on the flavor of the device. The problem is that we almost have to make 3 websites if we want to use it in Android, Iphone and PCs.
There are some W3C recommendations (http://www.w3.org/TR/2006/CR-mobile-bp-20060627/) from 2006, with I think is obsolete because 6 years made the internet and the devices completelly different.
Any contributions concerning that?
As far as I know (correct me if im wrong) Django is a Python framework, so it runs server-side. That should not effect anything running on the phone. All smart phones will be able to run HTML/CSS and JavaScript/jQuery.
If you are talking about how the page is displayed on such a small screen there are several options:
Have a responsive design that adapts to the device's screen size. Have a look at Bootstrap.
Have a separate mobile site and something that will detect a mobile/tablet device and forward it to the mobile site running on a subdomain like mobile.mysite.com.
Have a non-responsive site and use the viewport meta tag.
Another option is to use css media queries, which allow you to set conditional css depending on the screen or browser dimensions like this :
#media only screen
and (min-width : 325px)
and (max-width : 500px) {
/*CONDITION CSS*/
}
The nice thing about media queries is that you can get really detailed in theory you could have a media queries for 100's of devices specifying specific css for both the devices landscape and portrait mode.
Here's quite an interesting article about the Romney versus Obamas campaign and how each party has chosen to develop their mobile sites differently.
Simple question,
I make an application for my phone (android froyo).
Is it will run on android froyo tablet ?
Or I must make some modification to make it work on tablet ?
Simple answer: It may run on the tablet - try.
Not so simple answer: It depends on whether you use some features of the phone and whether those features are available in your tablet. For example, if your tablet does not have GPS and you are developing location aware applications, that obviously is not going to work. Another thing to take care of would be the usability of the application. Your UI would most probably be designed with the phone's form factor in mind. That may not look exactly appealing on a large screen device like the tablet.
So long as you use the appropriate <supports-screen> tags in your Manifest.xml file, yes. However, I'd strongly suggest you go about making a tablet UI, because users don't like phone UIs stretched on a tablet screen. This document might help you with that.
The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.
This question already has answers here:
Tablet or Phone - Android
(30 answers)
Closed 8 years ago.
Is there a method to identify if the device the app is running on is a phone or a tablet? We want to implement different behavior depending of the device type.
If you want the differnce because of screensize, you should find screensize, but this is not really easy, as there are tablets with small screens and phones with large screens. Still, it is ofcourse possible to get screen size.
You could try to do do something with GSM capabilities. But again, there are exceptions, like tablets that can call..
I would advise against making this differentiation, and define it on the basis that you need. Screensize, capabilities etc. You might get groups that consist of both "phones" and "tables", but you'll have a much better knowledge of what your group is like.
I'm still not sure how to define a "tablet" and everything you try needs that definition, but if you take a look at this link, you can see that it might be (did a quick read) that things that consider themselves tablets do not identify themselves in a user-agent string as a mobile device.
But:
you would need to get the useragent string for the devices' browser. Which would be illogical to use i guess
Useragent strings can be changed, like some people don't want mobile sites, so they change their agent string. That would influence your behaviour, which is weird.
In the end I think you need to define what a tablet is, and then check for that!