Hello am using simple HTML (no responsive framework - very new to web development) and CSS. I want to make a page for mobile only screens. I am aware that there are responsive layouts and frameworks available, but at this point I do not want to use it.
Is there a way to "scale" (not re-arrange like in responsive design and flex box design) the HTML page to fit 100% of the screen. (no scroll, just 100% fits in the screen - more like an mobile app).
If you:
avoid explicitly setting the width of elements on the page, eg the width of an image or a div
and you don't have a viewport meta tag in the head of your doc, eg <meta name="viewport" content="width=device-width, initial-scale=1.0">
and you don't have media queries in your CSS, eg #media (max-width: 480px) {... }
then smartphones will typically scale the page to fit the screen.
Good luck, hope this helps!
Related
I'm building a site with materialize css.
The default mobile nav menu on materialize breaks on mobile devices for longer entries. Basically, the words will wrap to the next line and overlap the words below it displaying encrypt-o-jumble.
I went and added specific media queries generally formatted like this.
#media screen and (max-width: 870px) {
.xp-1 {
min-height: 100px;
}
}
I tested these in the chrome browser and they are perfectly responsive.
When I view the same site on any kind of phone, or the chrome browsers phone views the media queries activate as if they were on a smaller screen. Tablets are generally big enough not to trigger the media queries.
For example: at 375px on desktop a line will wrap to the line below. With the media queries this the element will expand, pushing the element below down and creating enough space for the whole link.
When viewed on a 375px iPhone x the element will expand, but the text will get smaller leaving blank space.
I have tried adding a few different meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Here's some screenshots of the menu:
On the iPhone X Chome view (375px):
Regular Chrome browser view at 375px:
Heres a link to the live site:
https://onesourcebenefits.com/
How can I make this display the same on mobile as it does in the browser?
I've read through a ton of info on this site so far, and am continuing to look into this. Any help would be appreciated. :)
In this case materialize was enforcing fixed heights on nested tags within li tags as in the example for their mobile nav menu. I removed the nested ul's and li's and replaced them with divs with padding and hover properties. Now the site is responsive.
I'm making a small web project with Bootstrap 3.
At the top I've put this as it was suggested in most documents:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It works fine on desktop but layout seems to be small on my smartphone (Galaxy Note). Because this web app will mostly be used on a smartphone I wanted to force small screen by adding this to head section of html:
<meta name="viewport" content="width=320">
It didn't work, I've got same layout as of screen resolution greater than 768px.
What I want to achieve is Bootstrap to act in xs layout in small-factor screen size, independent of screen resolution.
Thanks
UPDATE:
Here is the fiddle: Fiddle Link
Display Metrics of my phone are: density=2.0 Dpi=320 heightPixels=800
scaledDensity=2.0 widthPixels=1280
EDIT:
Here are two screenshots. (I'll do a fiddle later) First is from phone, second from desktop. Desktop screenshot is what I want to get on a smartphone even if its resolution is on par with desktop.
Desktop:
UPDATE 2:
I've added this meta tag, but it didn't change anything on Android default browser or Chrome mobile:
<meta name="MobileOptimized" content="320">
What you are trying to achieve is overriding the basic premise of Bootstrap. Bootstrap uses the following scaling classes...
lg - For extra large displays
md - For standard sized displays such as desktops and laptops
sm - For tablet devices and devices with screens around the 7-11 inch range
xs - For mobile phones and devices with such small screens
The point of Bootstrap is to create a website style which will adjust itself based on the screen size automatically. You can use the md scaling class and if a smaller device is used then the elements will be collapsed and stacked on top of one another.
My site isn't resizing or reorienting on mobile. I tried putting
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
in the code, but that didn't help.
Is there an easy way to have a site reorient itself on mobile and fit itself on mobile regardless of the orientation?
I've read several posts on this topic, but the solutions don't seem to be working for me.
Use media queries with max-width.
#media(max-width:479px){
//css rules for mobile here
}
Your site should adjust according to orientation.
See here are different media queries you can put in:
Eg iPhone5:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
//your css style
}
Use (orientation:landscape) or (orientation:portrait) and do the css edits accordingly.
I'm unsure whether you have designed your site with 'fluid layouts' and 'fluid images'.
I'm busy developing a portfolio website. This website should behave responsively, ie: the website should be fully displayed when browsing on smaller screens.
I have added the meta viewport tag, but it does not seem to work. At the moment you need to scroll horizontally to view the full content. I want it to be initially scaled to the width of the viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
I guess I am missing something, but no clue what..
I was having all kinds of problems with viewport. Finally I just removed all traces of that stupid thing, and everything seems to scale correctly now. It might be that current mobile browsers are smart enough to scale without use of viewport. Of course I am using media queries too.
I am making a small SVG widget aimed at iphones with a fixed footer.
The problem is I want to use native pinch & zoom that only affects everything bar this fixed footer.
However I cant use native pinch & zoom if i use
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Which is needed I believe to standardize the 320px width across mobile devices?
My thought was then (dare i say it) an iframe for the pinch/zoom stuff above the fixed footer but you need 2 fingers to scroll an iframe and 99% of users wont know that (unless there is a simple js fix for that?)
Any help/guidance much appreciated.
Adi.