I am currently creating a desktop site (http://www.robtest.org.uk) that I want to work well with mobile browsers to alleviate the need to create a separate mobile site. Mobile safari appears to scale up the fonts of large blocks of text (which is fine). The problem is with tables which I use for content rather than layout. The fonts in the wide columns are scaled-up to make it readable while those in the smaller width columns are ignored.
My current workaround to render tables consistently is:
#media only screen and (max-device-width: 480px) {
#container td { -webkit-text-size-adjust:100% }}
It does work well for pages such as:
http://www.robtest.org.uk/audio_catalogue.html
But it's not ideal for tables like those containing our event details such as:
http://www.robtest.org.uk/events.html
In the latter I'd much rather have all the fonts scaled-up so that the page is consistent rather than just the right hand column.
Is there any way to do this?
Help would be very much appreciated.
Thanks, Dougie :)
Add a viewport tag in the <head> section of your page, it will help prevent device scaling/zooming and give you a uniform look across mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Related
Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I have this simple HTML generated from React
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>
When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the
This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?
What you're looking for is the #media selector. You read more about it here.
At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add
#media only screen and (max-width: ##px) {
}
Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.
On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.
Say for instance in your primary post you had
.desktop {
font-size: 30px;
}
For phone, you'd put
#media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}
I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution here, simply adding meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.
have been looking around for a solution to my query but haven't had any luck.
I have a website that I have designed with css responsive design.
I wanted to know if there is a way to use viewport to make a device such as an ipad
view the website look like that of a larger width device.
Essentially I want to make these responsive elements now sit like they do on a desktop computer but on an ipad and other mobile devices.
Have tried things such as
<meta name="viewport" content="width=device-width, initial-scale=1> but no luck so far.
<meta name="viewport" content="width="1100"> seems to make all the content appear the way I want but aligns the site to the left not centred.
I've used #media queries for my css and now I want mobile devices to essentially ignore these responsive design elements and look like it does in a desktop browser.
Any help appreiated
Hope this helps, put this in your css.
<style>
#media ( max-width:110px) {
.yourmenu{
//do your css coding here, you may tweak the size
}
}
</style>
more here: http://www.w3schools.com/css/css_mediatypes.asp
I am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">