PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Presentación
  • ¿Cuándo crear un nuevo rango de resolución?
  • ¿Cómo manejar la reducción o el aumento de las rebanadas?
  • ¿Cómo optimizar el espacio de Visible en un rango de resolución?
  • ¿Por qué anular la posición y el tamaño de los controles causa una superposición en el navegador?
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Otros
Procedimientos almacenados
Presentación
El Responsive Web Design fue utilizado en sus páginas, pero todavía se encuentran algunos puntos de bloqueo.
Esta página presenta varios consejos de diseño.
En cualquier caso:
  • Compruebe todos los errores de UI: indican que los afectados control y rango de resolución.
  • Comienza desde el Default rango de resolución:
    • Empieza desde el "Escritorio" rango de resolución en modo "Escritorio primero" y reduce el navegador en el editor (usando el manipular) para comprobar la consistencia de las modificaciones.
    • Versiones 22 y posteriores
      Empiece desde el "Móvil" rango de resolución en modo "Móvil primero" y amplíe el navegador en el editor (usando el manipular) para comprobar la consistencia de las modificaciones.
      Nueva funcionalidad versión 22
      Empiece desde el "Móvil" rango de resolución en modo "Móvil primero" y amplíe el navegador en el editor (usando el manipular) para comprobar la consistencia de las modificaciones.
      Empiece desde el "Móvil" rango de resolución en modo "Móvil primero" y amplíe el navegador en el editor (usando el manipular) para comprobar la consistencia de las modificaciones.
¿Cuándo crear un nuevo rango de resolución?
Puedes crear un rango de resolución:
  • Para administrar un dispositivo específico.
  • Para gestionar una visualización específica. en el ejemplo siguiente (página en modo "Desktop First"), se solicita una visualización intermedia:
    Crear un rango de resolución
¿Cómo manejar la reducción o el aumento de las rebanadas?
Por Default, los controles están usando el anclaje en ancho "Adaptado a la red". Por lo tanto, los controles se reducen o amplían proporcionalmente según el modo (Desktop First o Mobile First).. Por ejemplo, en "Desktop First".:
Controles disponibles
Para limitar la reducción de controles, todo lo que tiene que hacer es definir el tamaño mínimo:
  • La opción "Tamaño mínimo" en la pestaña "UI" de la ventana de control description.
  • Versiones 22 y posteriores
    La opción "Tamaño mínimo" en la ventana de gestión de las anclas de control.
    Nueva funcionalidad versión 22
    La opción "Tamaño mínimo" en la ventana de gestión de las anclas de control.
    La opción "Tamaño mínimo" en la ventana de gestión de las anclas de control.
Para evitar reducir los controles, se debe aplicar a los controles el anclaje en anchura "Use the edit size"..
Observación: Si se produce un error en la interfaz de usuario o si el contenido del control no se puede utilizar visualmente, el control debe ser movido y redimensionado.
Unusable controls
¿Cómo optimizar el espacio de Visible en un rango de resolución?
El diseño de la página está a cargo de Default. El contenido de la página está adaptado a la rango de resolución.
Para optimizar el espacio de la Visible, puedes reducir los márgenes de la página (dentro de los márgenes) en una rango de resolución y aplicar el anclaje horizontal "Use the edit size" a los controles.
Por ejemplo, en el modo Desktop First:
Adaptación del diseño y del contenido
¿Por qué anular la posición y el tamaño de los controles causa una superposición en el navegador?
La posición de la control se anula en la rango de resolución "Móvil" y/o "Tableta".: en el navegador, anular la posición y el tamaño de los controles hace que se superpongan.
¿Cuál es el problema? Anulando la posición en el "Móvil" y/o "Tableta" rango de resolución cambia el orden de los controles definidos en el "Escritorio" rango de resolución (que se usa como reference rango de resolución en el modo "Escritorio primero").
En el modo "Diseño Web con capacidad de respuesta", los controles están organizados en relación con los demás.. Este orden depende de la posición (de arriba hacia abajo y luego de izquierda a derecha) y del anclaje.. Debe ser exactamente igual en todas las rebanadas.
De hecho, la tecnología de "Diseño Web Responsable" está usando un solo flujo de HTML para todos los cortes, mientras reposiciona los controles por CSS. El orden de los controles en el reference rango de resolución define el orden de los controles en el flujo de HTML.
Ejemplo: En el siguiente ejemplo, la página contiene una celda que agrupa otra celda y un Image:
El orden de los controles en el "Escritorio" rango de resolución (la referencia rango de resolución) es:
  1. la célula_1 que agrupa la segunda célula_2 y la Image,
  2. la célula CELL_2,
  3. la Image.
En el rango de resolución "Mobile", el tamaño y la poción de los controles se sobrescribe: el Image se coloca antes de la celda CELL_2. El orden de los controles en el "Móvil" rango de resolución es diferente del orden de los controles en el "Escritorio" rango de resolución:
En tiempo de ejecución, hay una superposición, ya que el orden de los controles en las porciones "Desktop" y "Mobile" es diferente: el Image se desbordará en la celda CELL_2 y no puede:
Tpara evitar cualquier superposición inesperada en el navegador, asegúrese de que el orden de los controles en las secciones "Móvil" y "Tableta" es el mismo que el orden de los controles en el "Escritorio" rango de resolución (referencia rango de resolución).
En nuestro ejemplo, para obtener el resultado esperado, se pueden utilizar dos controles Imagen:
  • El primer control Imagen se colocará antes del control CELL_2 en el Escritorio rango de resolución (por lo tanto, será el primero en el orden de los controles en el reference rango de resolución). Será Visible en el "Móvil" rango de resolución solamente.
  • El segundo control Imagen será Visible en el "Escritorio" rango de resolución solamente.
Para simplificar la colocación de los controles en el rango de resolución "Móvil" y/o "Tableta", a partir de la versión 21 Actualización 3, se genera sistemáticamente un error de compilación del UI por parte del editor de la página si no se respeta el orden de los controles entre los diferentes cortes.
Versión mínima requerida
  • Versión 21
Comentarios
Haga clic en [Agregar] para publicar un comentario