Web page responsiveness with APPLE devices
i have various web pages ,that are responsive using various media queries that are working for various and operating system except apple devices and os(ios,ipad,iphone)
Now my pages are not responsive with apple devices.I have used
but still it is not working.please suggest me some way.
There is actually no difference in regards to the responsiveness on different platforms. It doesen't matter which browser (e.g. Safari on Apple devices) you use. Unless it's an antiquated version of Safari.
Maybe you have coded your media query wrong? Here is an Example how one should look like:
#media all and (max-width: 1200px) {
/* your css here */
}
In this example your css will take effect when the browser window is less than 1200px wide.
Hopefully this helped you a little bit.
Related
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and Ancestry only resize to a certain point - on a phone the layout is completely different. Any help with this? I'd like to know how sites like the examples given achieve this.
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with:
html {
min-width: 1000px;
}
But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be applied to mobile devices. Showing the mobile layout on desktop if a user resizes the window is perfectly normal. It naturally adapts to split screen mode situations.
I should probably make this a comment but they look at the device width, not the viewport width in their media queries and javascript. (I'm sick and don't feel like writing any more). There are also services available that can help you detect what type of device there is. However, these services can be slow and pricy sometimes. More often not worth the effort.
You can detect if your viewer is a mobile or a PC, then load different CCS files.
One way you can detect if there is a mobile is by javascript UserAgent BUT it is not very effective.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
I haven't tested this recently, but there is a 'mobile' device specifier:
#media mobile and (min-width: 400px) {
.col { width:50% }
}
#media mobile and (max-width: 400px) {
.col { width:100% }
}
That'll work on mobile devices, but not desktop
I deployed the same scenario on a WordPress site using "mobble pluging" which simply detect the device then generate a HTML version for mobile, tablet or desktop.
so, I want to do a "mobile" friend view of my site. Its liquid designed already, but mobiles need definitely different look. Now, how to detect if I visited it with mobile (iphone, ipad, android)? More specifically, I imagine it as if the screen width is smaller than a value (dunno that value), then thats considered a mobile client. How to detect, so that generate the mobile optimized CSS/HTML outputs? Maybe im too simple, but to me mobile client = smaller screen, and nothing more
There isn't really a great way. Before you used to be able to say if under a certain number of pixels then it is a phone. But now phones are getting both higher pixel count but also crucially large screens too. Tablets are as small as 7" now, but they could get smaller. Some phones are over 5" and could get bigger. Then there are things like physical pixels to css pixel ratios to think about.
If not screen size or pixel count, maybe it could be if it supports touch or not. But Windows 8 threw that on its head, as that supports touch on the desktop.
I would say it depends on the content rather than the device. Test your site using various widths. See when the width becomes sub-optimal for the content, and throw in a media query there to adapt the layout. I think a content first rather than device first strategy is more future proof.
Also remember that it may not just be a mobile that wants your mobile friendly layout. For example soemone could be using their browser in a small window, rather than full screen, or they could be using the snap mode in Windows 8, where the width is the same as a iPhone width at 320px.
Use media queries. Then you can detect if you are on a mobile device the browser will load the mobile CSS and if you are on a PC the browser will load the PC version of the CSS.
http://www.w3.org/TR/css3-mediaqueries/
Then you can develop the mobile device CSS like this way (supose the mobile have 480x640 pixels):
#media screen and (max-device-width:480px){
...
put your mobile device CSS code here
...
}
Supose you want develop CSS for tablets (1.024x768pixels)
#media screen and (max-device-width:1024px) and (orientation:portrait){
...
put your tablet device CSS code here when tablet has portrait orientation.
...
}
#media screen and (max-device-width:1024px) and (orientation:landscape){
...
put your tablet device CSS code here when tablet has landscape orientation.
...
}
And for PCs (1280x968pixels):
#media screen and (max-device-width:1280px){
...
put your PC CSS code here
...
}
I am coding HTML newsletter, I have to code one file that once sent it detects device if it's smartphone or PC. If PC it shows 600px width and for smartphones it shows 300px width.
So how should I set the width property so that it looks as per the width mentioned above.
You are looking for CSS Media Queries, here is a basic solution that may suit your needs:
/* ALL (Fallback), this will be used by browsers that don't support CSS Media Queries */
#container{width:300px;}
/* Screen more than 600px in width */
#media only screen and (min-width: 600px){
#container{width:600px;}
}
/* Screen less than 600px in width */
#media only screen and (max-width: 599px) {
#container{width:300px;}
}
More examples here: https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.css#L79
It is very bad practice to use width % because if there are images within the page these will not be effected by this in most browsers. There is no proper way to code an EDM for both mobile devices and computers yet. Email clients and web services are just not up to par for this.
In my opinion, if you want to make it user friendly for both devices then you should be creating content fields similar to that if the windows 8 interface so that it will still look good on the computer and will have a decent look on a mobile device.
So lets take a look at what mobile devices support Media Queries. It is a HUGE hit and miss in this area.
Supported:
Android Mail (very buggy), Iphone mail and Ipad mail (>=320px <= 480px).
This does come with the risk of not having many elements displaying correctly still because it is relatively new still.
Not Supported
Android Gmail, Iphone Gmail, Ipad Gmail and Blackberry 8000
The only real option to go with for EDM's is to keep them static meaning you should never try and make it fluid. EDM's basically have a set amount of info in them and images then get sent so there is no need for the widths/heights to be fluid. Doing this only runs the rist of something breaking in another browser or email client.
I am trying to make a web-application, which I will host on a server. It should be able to be accessed by mobile browsers on all smart phones, and also on desktop web browsers.
I am pretty new to this. Checking this out on Google is confusing me a little more, because I know I can make applications in HTML5, CSS3 and JavaScript and they can be accessed on mobile browsers similarly as desktop browsers, but what I want to know is how to take care of the size and specification for the phone. The UI components should be user-friendly in mobile environment.
Is there any IDE or API that makes this possible?
but what i want to know is how to take care of the size and
specification for the phone,
You should be using CSS media queries for that:
#media (max-width:480px)
{
// styles for devices with width 480px or less, e.g. iPhone
}
MEDIA QUERIES
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}