Mobile browsers resize textareas when entering input - javascript

I'm designing a rudimentary note-taking PWA, and my website (https://cloudwerewolf.github.io) works fine on desktop browsers and when launched from home screen on mobiles as a PWA, however when run in a mobile browser from navigating directly to the link, all textareas shrink when one of them is clicked on and I want the textareas to stay the same size as before instead of shrinking. Is it because of the keyboard skrinking the perceived width of the screen or is there another cause, and how can it be fixed?
EDIT: found & fixed the problem:
#media screen and (orientation:landscape) {
textarea {
width: 43.5%;
}
#notehead {
width: 20.5%;
}
#reH {
font-size: 24px;
}
}
#media screen and (orientation:portrait) {
textarea {
width: 80%;
}
#notehead {
width: 35%;
}
}
When the keyboard appeared on my screen, CSS decided that the orientation was now landscape due to the viewport width now being less than the viewport height, and changed the sizes of the textareas and font sizes accordingly. I took out that chunk of code and replaced it with width percentages for the portrait mode placed into the regular textarea{} and #notehead{} CSS areas, with maximum widths in pixels to prevent the textareas from becoming too wide on desktops.

In your CSS you are configuring your textarea to be min-width: 80%, so when the screen size is reduced the textarea will reduce until it reach the limit (80%) from here, the textarea won't reduce.
Try, maybe reducing the min-width: 80% to min-width: 20%
Please try to show your code in the question, we can help you to solve the problem in this manner not just putting a link to your website.

Related

picture width should be equal to browser height

On my website, I want to have a header image, of exactly the same height as the browser. So when you open the website you should see a picture, which covers all of the screen but isn't a background image. This way you should be able to move away from the image if you scroll down. The problem is, that if I say "browser height = pixel height", the format of the picture will change.
Because of that, I need to have a function, that automatically changes the width of the picture to the height of the browser or rather the amount of vertical pixels your browser has. If you scroll for example the picture shouldn't change.
Until now I have only tried CSS because I have no experience with javascript. After visiting many websites I still haven't found a solution to this problem. Here you can see what the website should look like on pc and a mobile device.
If I however try to look at the mobile version, it looks like this, even though it should look like the first picture.
Did you try to add media only attribute to your css? I used below max width 428 px because that is mainly on iPhone 13 but you can change it if you want.
.imageexample
{
display: block;
width:428px;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.box
{
display:inline-block;
width:100%;
text-align:center;
}
#media only screen and (max-width: 428px)
{
.imageexample
{
width:100%;
}
}

A good alternative to this use of CSS "width: fit-content" in a responsive layout?

I'm working on creating a responsive layout for this website: https://json-z.org/
The layout follows a typical pattern of spreading out horizontally when screen real estate permits, but then using more and more vertical stacking of components as screen/window dimensions narrow.
At phone-sized portrait widths, however, I found I needed to squeeze things just a bit more than vertically stacking could accomplish. My first method of paring down required width looked like this:
#media screen and (max-width: 374px) {
.details-wrapper {
margin: -10% -15% -15% -10%;
}
.details {
transform: scale(0.80);
}
}
This got the job done, but I really wanted something that smoothly applied just as much scaling down as necessary, and no more, for any particular screen width, and that also automatically computed just the right margins to match any particular scaling factor.
To make a long story short, I created an Angular component to do the job, and the code can be found here: shrink-wrap.component.ts, shrink-wrap.component.html, shrink-wrap.component.scss.
What concerns me is that I'm relying on width: fit-content to make this work.
.outer-wrapper {
position: relative;
}
.sizer {
height: 1px;
opacity: 0;
position: absolute;
width: 100%;
z-index: -1000;
}
.inner-wrapper {
overflow: visible;
position: relative;
width: -moz-fit-content;
width: fit-content;
}
The MDN website describes fit-content as:
This is an experimental API that should not be used in production code.
Despite this warning, however, the CSS is working well for Chrome on Windows and Mac, Firefox on Windows and Mac, and Safari on Mac and iOS (as tested on both a big iPhone XS Plus and a tiny iPhone 5S). It works OK on Edge for typical desktop usage, but falls a part a bit at very narrow window sizes.
Oddly enough, the following is not listed as experimental:
.some-class {
display: grid;
grid-template-columns: fit-content(100%);
...
...but wasn't anywhere near as compatible across as many browsers.
Can anyone recommend a better alternative to fit-content?
What I need is for the container of the panel I'm trying to shrink to go no smaller than the minimum the panel requires, while both a sibling of that container, and the parent of both, get smaller as screen/window width demand.
While inner-wrapper is 362 pixels wide, sizer and outer-wrapper are both only 336 pixels wide, and it's precisely this ratio, 336/362, that tells me the exact amount of scaling that I need.

How to adjust contents to automatically fit size of the screen?

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?
You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Make elements move horizontally only when window shrinks

I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!
#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}
It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}

How to make Responsive Images for mobile experiences

UPDATE
I have Fullscreen background image. This creates problems for mobile browsing for the images are large and hi-res.
Next problem is with things like retina display how does a design/programmer prepare to deal with this issue? I see lot of article about how to switch between images. But then I get overly confused with pixel density vs resolution. The when and where it is needed and the how and why to target them.
Example:
*Fullscreen background image at 1900x1080 resolution & 72dpi. For best optimization, How many images should there be per resolution/pixel density? Furthermore, Given this scenario which library/plugin/symantics would be best on tackling this situation?
Lastly, If i use media queries to target and switch background images will it download all the images? or just when the requirements have been met?
#media (min-device-width : 768px)
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}
#media only screen
and (min-width : 1824px) {
background-image:url('paper1900.png');
}
Thanks stack
//old question didnt wnat to remove it for comment purposes//
So I'm making a responsive website with fullscreen images. The problem I've been running across is that the orginal images are far to large for mobile to download.
Being new to responsive design, I had no idea that this was a problem and discouvered it on my own accord. I read a few article
The best being:
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
My problem is that: I dont believe <picture>tag is open to the public? I cant find any any more info on this.
Does anyone know if this is allowed? Furthermore, more information/documentation on how to use it correctly.
If picture is non-applicable. Is there any "standard" persay on making images responsive with out bloating mobile bandwidth?
This is the way i did retinafying in my last project:
First set images for desktop in an ordinary css using background-image:
#bg {
background: image-url('wallpaper_desktop.jpg') center top;
background-size: 1024px 768px;
}
Then, I adress mobile phones e.g. iphone:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#bg {
background: image-url('wallpaper_mobile.jpg') center top;
background-size: 320px 480px;
}
}
Then it comes to retina image handling. Use an image, doubled in size (see the "#2x" in filename):
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
#bg {
background: image-url('wallpaper_mobile#2x.jpg') center top;
background-size: 320px 480px; // Original size
}
}
Since there are also iPads and MacBooks with Retina Displays, we should consider to serve them larger and hi res versions in comparison to hi res phones:
#media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
background: image-url('wallpaper_desktop#2x.jpg') center top;
background-size: 1024px 768px;
}
So, usually I'm using 4 versions per image. 2 desktop versions (one with doubled size for retina displays) and 2 mobile versions (also one with doubled size for retina displays)
By the way: There are no additional requests, when using media queries for additional images.

Categories

Resources