So i have a bit of a predicamenyt. I have a link that displays in an iframe if viewed on computer, and in parent page if on mobile device.
If viewed on the mobile device i only want users to see the page in landscape. So, i have use the following code:
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>
However, the problem comes in because of the iframe. If viewed on a computer the warning-message div is shown, not the wrapper content, despite the fact that the computer screen is landscape. I think this is because the iframe is portrait.
Does anyone know of a way to make it so that in non-mobile devices, only the wrapper div content is displayed, not the warning message (ie effectively treat all non-mobile devices as landscape)?
I hope the question makes sense.
Thanks in advance for any help.
No, this is not possible with just CSS. Your assumption is correct that the iframe itself, if taller than wide, will also trigger the portrait orientation rules, since an iframe is essentially a sandboxed browser. You'll get the same result if you open it in a desktop browser that has 'portrait' sizing.
A workaround could be, since you're already detecting desktop/mobile browsers, to add a special GET-parameter to the URL when opening in an iframe, ie. add ?iframe=1 to the URL, and then in the code (or if need be even in JS) detect this parameter to add an extra class to your html or body elements. You can then use this extra class to extend the media query rules.
Having said that I'd heavily recommend against what you're doing right now - media queries are all about making web sites and applications more dynamic, not restrictive. Prohibiting your users from holding their device the way they want to is just going to cause complaints and irritation, unneeded if you just use the same media queries to implement an alternative layout or scale down the landscape content to fit into portrait if aspect ratio is really that important.
Related
I am attempting to write the front-end of a basic logon form for a website. I am a novice web developer and have run into some problems when designing the mobile version of the website. You can find the source code to my website here and an image of the form on my website here.
The website is designed to only display the UI when the screen width is greater than 1024px or when the screen width is less than 1024px and the device is in a portrait orientation. This is intentional, and when these specifications are not met this is displayed.
However, when I am in portrait mode and I click on the form, this is momentarily displayed. It quickly disappears however, and I'm pretty sure this is because once the webpage displays the "unsupported screen size" page, the form no longer exists on the webpage. This makes the keyboard slide down and the page go back to normal. To solve this issue, I referred here, but the webpage still did not work.
I then tried to remove the "unsupported screen size" page (this source code can be found here), but then this results when I click on the form. I'm pretty sure this is because I've set the height of html and body to 100%.
Ideally, I'd like to produce a webpage which retains the "unsupported screen size" page when the screen size truly is unsupported (or is in the wrong orientation), but when the form is clicked on the mobile site, I'd like to make the original webpage not change size but make it scrollable on top of the keyboard. Again, I'm a novice (this is my first time in front-end development) and I'd appreciate any help or advice for me to resolve this problem. Thanks in advance.
When I've done simple projects and I want to hide on some type of device I will use css #media rule like the following example (resize your window to see the text change)
#media only screen and (max-width: 768px) {
.small-screen{
display:inherit;
background-color: red;
}
.large-screen {
display:none;
}
}
#media only screen and (min-width: 769px) {
.small-screen{
display:none;
}
.large-screen{
display:inherit;
background-color: blue;
}
}
<span class="small-screen">show me on a small screen</span>
<span class="large-screen">show me on a large screen</span>
i had a similar problem with a form and the keyboard on mobile. when i would press on an input field the keyboard would pop up and change the page height to be smaller than the width, which would make the landscape rules apply, even though in practice the device was in portrait.
my solution was to apply the same rules i used for portrait, for the same max width in landscape.
that would look similar to this:
#media screen and (max-device-height:900px) and (max-device-width:415px) and (orientation:portrait){portrait rules}
#media screen and (max-device-width:415px) and (orientation:landscape){portrait rules}
I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
I have a little question for all of you !
I will try to apply mobile stylesheet only if the user is on a mobile.
If the user is on desktop only the desktop's stylesheet will be apply even after resizing the window.
Here is the result I'm looking :
• enter link description here
When you resize your windows the mobile's stylesheet is not apply because you are on a desktop version
easy or not ? Help me please
Thank's a lot
you are gonna need some javascript to detect the browser, even then it's still a difficult task to accomplish 100% of the time since there's always new browsers out there, one of the most up to date librearies is bowser. https://github.com/ded/bowser
You ca use css media queries
For example
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
For example the above style will be applied only when the max-width is less than or equal to 500
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/