Develop Reference

Issue with the changing of the orientation of the screen on an html5 home screen app on iOS 11

When changing orientation from portrait to landscape on a mobile web app (using meta "apple-mobile-web-app-capable" - launched from the home screen icon) a black bar appears at the top of the screen, pushing the content down.
Steps to Reproduce:
1. Once bookmarked, launch the web app from the home screen icon in portrait mode.
2. At any moment, switch orientation to landscape.
3. Black bar from top of the screen pushes down the viewport content.
After this, a black bar appears causing the app to not be full screen anymore.
I tried using viewport-fit cover or contain in the meta tag, but nothing happened.
Thanks

The IOS 11 isn't a real criteria for a specific resolution depend of the device used. you have to add some media queries for every devices wanted : https://en.wikipedia.org/wiki/List_of_common_resolutions
Now you have to target what you want : just add some new sizes with (portrait-landscape) using CSS.
Open a media query #media add property with targetting and the orientation and we can use inside new specific property CSS for this situation.
#media only screen and (width : 603px) and (orientation: portrait) {
#device:after {
content: "Nexus 7 - portrait - chrome";
}
}
#media only screen and (device-width : 1280px) and (orientation: landscape) {
#device:after {
content: "Nexus 7 - landscape - firefox";
}
}

Website turns to landscape with keyboard

I've ran into an interesting problem. On my website I have two versions of navigation bar for mobiles - landscape and portrait. To detect these two I use CSS media orientation.
#media (orientation: landscape)
{
/* inline menu */
}
#media (orientation: portrait)
{
/* multiple rows menu */
}
However, when I open my keyboard page turns into landscape, because the actual page size becomes smaller. Can someone help me how to fix this? All I can think about is focus event on inputs, so whenever they're focused the portrait manu is turned on, but it would change the menu even on landscape.
Here's an illustrative image
Thanks!

If you check Media Queries W3C Recommendation
You will find this interesting sentence:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
So, when the keyboard is opened, your page turn into landscape mode.
There are multiple ways to overcome this problem, you can
check this answer.

You should ignore the height/orientation completely. Something like this:
#media (max-width: 480px)
{
/* inline menu */
}
#media (min-width: 481px)
{
/* multiple rows menu */
}

How to stop "tel:number" links from working on desktop / tablets

This must be very common.... I apologize, but can't find a working solution here...
I'm working on a site (retrofit) and it has responsive CSS such as:
/* Refecence from responsive.css
/* crank up to 5000px to support high res monitors and TV's */
#media only screen and (min-width: 1200px) and (max-width: 5000px)
/* Portrait tablet to landscape and desktop - BROWSER SIZE 2 */
#media only screen and (min-width: 991px) and (max-width: 1200px)
/* Landscape phone to portrait tablet - BROWSER SIZE 3 */
#media only screen and (min-width: 767px) and (max-width: 991px)
/* All Mobile Sizes (devices and browser) - BROWSER SIZE 4 */
#media only screen and (max-width: 767px)
/* Landscape phones and down - BROWSER SIZE 5 */
#media (max-width: 480px)
/* iphone portrait mode - BROWSER SIZE 6 */
#media (max-width: 320px)
I'm new to this, and done quite a bit of research, but I have a couple of questions:
I have the plan to have two blocks of HTML, one hidden, and use JS or CSS to hide the appropriate block based on user being on mobile device or not.
I wish to avoid useragent, as there are way too many. By default, Android no longer parses numbers as such (as per other posts) without the 'tel:'. I tested on Nexus 5. On the other hand Firefox asks for device to use on a 'tel: 'link.
Can I use my current #media CSS blocks? If so what about retina?
OR can useragent based JS be ok somehow?
Other options, I mean what do most people do???
Help is appreciated.

After more research I settled on a Javascript library isMobile.
https://github.com/kaimallea/isMobile
It seems that many use it, so I assume it would work.
My worry is that if a new device comes up, i have to continually update this library...

How to get an App made using JavaScript to autoresize for other Apple Devices?

I've created an app using Javascript / CSS and HTML, just a simple game, nothing special.. however, when I run the game in xcode (iphone5 simulator) it runs fine, no problems and on an actual iPhone5 device using the ad-hoc method via my Apple Dev Account, but when I try it on the iPad mini and iPad 3 the game only show's up in the top left hand corner inside a what can only be described as an iphone5 size screen. Question is, how using either JS, CSS or HTML do I tell the app (in xcode6) to resize to a device bigger than iphone5.. basically how do I tell the app to resize depending on device, I want to launch the game (hopefully!) for iphone5, 6 and all iPads of course.
I'm using xcode6 and iOS8
Many thanks in advance for any help given.
Would be happy to screenshare over Skype if this is easier to do? (Let me know)

The problem was iPhone has smaller width compare to iPad. You have develop an app for iPhone , so when u simulate it on iPad i only takes width upto 586px or 320px not all iPad width. This width can be adjusted by using media queries.
Add the following media queries with your stylesheet.
Use CSS media queries as follows
html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}
//media queries for iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
Use proper width upto 1024px to 768px as it can match with iPad and you can get your app viewable for iPad.
Go to this Link for iphone and ipad styles.

responsive tables in css

I am trying to make the following jsfiddle code work. Actually all is working fine, for server side i am using ColdFusion.
the values are appearing 6 in a row. the 6 is hard-coded in ColdFusion variables, so it splits the values in 6 and then next row.
Now i want to make this a responsive so it should work with tablets and mobile devices without much pain in the a****s
Here is the fiddle i had generated
http://jsfiddle.net/9arpxvga/
This needs a help in implementation of responsive design...
A Jquery, javascript solution will also work

You're going to be hard-pressed to find an objective solution to such a broad question. So, broadly: one of the many ways to implement responsive design is to write CSS media queries, targeting various screen sizes. Here's an example snippet taken from getskeleton.com (which might be worth checking out if you need a bare-bones responsive framework to get you started)
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
You'd just write new CSS (or override your css) for each of the screen sizes you're trying to target. (Nest your css within the brackets after each media screen). Hope that helps.